|
|
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 |
|
Type
: |
Develop |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Media Events Attribute |
|
Uploaded by
: |
Admin |
Read Article https://horje.com/learn/1434/reference