How do you detect HTML5 video events?

Question

How do you detect when a HTML5 <video> element has finished playing? I found a spec mentioning an ended event, but I don't really know how to interact with it.

Thanks!

Answer 1

Have a look at this 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>

EDIT: In response to the comment, onended is a HTML5 standard event on all media elements. See the W3 spec at the following address: http://www.w3schools.com/html5/html5_ref_eventattributes.asp

This event will work on all HTML5 compatible browsers.

HTH

Answer 2

The tag <video> is a media content that have the following attributes.

           attribute float currentTime;
  readonly attribute float startTime;
  readonly attribute float duration;
  readonly attribute boolean paused;
           attribute float defaultPlaybackRate;
           attribute float playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended; 
           attribute boolean autoplay;
           attribute boolean loop;

Answer 3

You can add an event listener with 'ended' as first param

Like this :

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

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }
        // What you want to do after the event
    }
</script>