Detect when an HTML5 video finishes

Question

How do you detect when a HTML5 element has finished playing?

Answer 1

Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.

This is the pertinent section:

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

then you can use:

<script>
    var video = document.getElementsByTagName('video')[0];

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.