How to detect when an HTML5 video finishes with JavaScript?

Spread the love

Sometimes, we want to detect when an HTML5 video finishes with JavaScript.

In this article, we’ll look at how to detect when an HTML5 video finishes with JavaScript.

How to detect when an HTML5 video finishes with JavaScript?

To detect when an HTML5 video finishes with JavaScript, we listen to the ended event.

For instance, we write

<video src="video.ogv" id="myVideo">video not supported</video>

to add a video element.

Then we write

const onEnded = (e) => {
  // ...
};

document.getElementById("myVideo").addEventListener("ended", onEnded, false);

to select the video element with getElementById.

Then we call addEventListener to listen to the ended event.

onEnded is called when the event is triggered after the video finishes playing.

Conclusion

To detect when an HTML5 video finishes with JavaScript, we listen to the ended event.

Leave a Reply

Your email address will not be published.