HTML Audio & Video
HTML DOM Audio ended Property
The ended property returns whether the media element has finished playing, that is, playback has reached the end of the media. It is a read-only boolean.
Definition and Usage
ended is true once playback reaches the end during normal forward playback and is false at all other times. It is closely related to the ended event, which fires at the same moment and is usually the more convenient way to react.
Syntax
mediaElement.endedIt returns true after the media has played to completion, and false while playing, paused mid-way, or before playback starts.
Example: play the next clip when one ends
<video id="myVideo" width="320" controls autoplay muted>
<source src="clip1.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById("myVideo");
const playlist = ["clip1.mp4", "clip2.mp4", "clip3.mp4"];
let index = 0;
video.addEventListener("ended", () => {
console.log("ended?", video.ended); // true
index = (index + 1) % playlist.length;
video.src = playlist[index];
video.play();
});
</script>When the current clip finishes, video.ended becomes true and the ended event fires, letting the handler load and play the next source. Note that if loop is set, playback restarts instead and ended never becomes true.
If the loop property is enabled, the media seeks back to the start automatically and the ended event does not fire, so ended stays false.