• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / Detect when Native HTML5 Video Finishes Playing

Detect when Native HTML5 Video Finishes Playing

Last updated on October 9, 2018 by Sal Ferrarello

On a recent project, I had to trigger a certain behavior when a native HTML5 video had completed playing (i.e. reached the end of the video, manually stopping it should not trigger the behavior). My on page element looked something like:

<video id="primary-video"
  src="videos/my-video.mp4"
  width="560"
  height="315">
</video>

I was able to monitor whether or not this video had reached the end with the following JavaScript

var video = document.getElementById('primary-video');
video.addEventListener('ended', function(e) {
  alert('The primary video has played to the end.');
});
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming Tagged With: JavaScript

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in