YouTipHTML Audio/Video DOM ended Event
Home HTML JS CSS Bookmark Search
Simple Tutorials -- Learning not just technology, but also dreams!
HTML Audio/Video DOM ended Event
The ended event is fired when the media playback has finished (or stopped for other reasons).
This event is typically used to trigger actions after a video or audio file finishes playing, such as displaying a message or loading the next item.
Syntax
element.addEventListener("ended", function(event) {
// Your code here
}, false);Example
Below is an example demonstrating how to handle the ended event in HTML5 audio/video elements:
<!DOCTYPE html>
<html>
<head>
<title>Audio/Video Ended Event Example</title>
<script>
function handleEnded() {
alert("The media has finished playing!");
}
</script>
</head>
<body>
<audio id="myAudio" controls>
<source src="example.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("myAudio").addEventListener("ended", handleEnded);
</script>
</body>
</html>Browser Support
The ended event is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.
Related Events
play– Fired when playback starts.pause– Fired when playback is paused.timeupdate– Fired periodically during playback.loadedmetadata– Fired when metadata is loaded.
Summary
The ended event is essential for handling the end of media playback. It allows developers to execute custom logic after a video or audio file completes, enhancing user experience with interactive feedback.