HTMLMediaElement: ended event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Theended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.

This event occurs based uponHTMLMediaElement (<audio> and<video>) fireended when playback reaches the end of the media.

This event is not cancelable and does not bubble.

Note:Theended event doesn't fire if theloop property istrue andplaybackRate is non-negative.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("ended", (event) => { })onended = (event) => { }

Event type

A genericEvent.

Examples

These examples add an event listener for the HTMLMediaElement'sended event, then post a message when that event handler has reacted to the event firing.

UsingaddEventListener():

const video = document.querySelector("video");video.addEventListener("ended", (event) => {  console.log(    "Video stopped either because it has finished playing or no further data is available.",  );});

Using theonended event handler property:

const video = document.querySelector("video");video.onended = (event) => {  console.log(    "Video stopped either because it has finished playing or no further data is available.",  );};