HTML onended Event Attribute - Media Events Attribute

The HTML onended Attribute is a event attribute which works when the audio/video is ended. We can add some custom message in this event like “Thank for watching”, “Share”, etc. Usage: This attribute is used in <audio> and <video> element.

Example of HTML onended Event Attribute

It will alert that the audio has ended.

index.html

Example: HTML

<audio controls onended="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/ogg">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Output should be:

Definition and Usage of HTML onended Event Attribute

The ended event occurs when the audio/video has reached the end.

This event is useful for messages like "thanks for listening", "thanks for watching", etc.

Browser Support of HTML onended Event Attribute

The numbers in the table specify the first browser version that fully supports the event.

Syntax of HTML onended Event Attribute

<element onended="script">

Attribute Values of HTML onended Event Attribute

Value	Description
script	The script to be run when the audio/video has ended

How to alert that the audio has ended

Press play and wait for the audio to end.

The audio has ended.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('The audio has ended');
}
</script>

<p>Press play and wait for the audio to end.</p>

<audio controls onended="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/ogg">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body> 
</html>

Output should be:

How to alert that the video has ended

Press play and wait for the video to end.

The video has ended.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('The video has ended');
}
</script>

<p>Press play and wait for the video to end.</p>

<video controls onended="myFunction()">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/mp4">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

html event attributes

List of Media Events	Media Events Attribute
HTML onabort Event Attrribute	Media Events Attribute
HTML oncanplay Event Attribute	Media Events Attribute
HTML oncanplaythrough Event Attribute	Media Events Attribute
HTML ondurationchange Event Attribute	Media Events Attribute
HTML onended Event Attribute	Media Events Attribute

Single Articles

Example of HTML onended Event Attribute	Media Events Attribute
Definition and Usage of HTML onended Event Attribute	Media Events Attribute
Browser Support of HTML onended Event Attribute	Media Events Attribute
Syntax of HTML onended Event Attribute	Media Events Attribute
Attribute Values of HTML onended Event Attribute	Media Events Attribute
How to alert that the audio has ended	Media Events Attribute
How to alert that the video has ended	Media Events Attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	Media Events Attribute
Uploaded by:	Admin

Reffered: https://www.w3schools.com/tags/ev_onended.asp