HTML5 <video> callbacks?

Question

I'm working on a site for a client and they're insistent on using HTML5's video tag as the delivery method for some of their video content. I currently have it up and running with a little help from http://videojs.com/ to handle the Internet Explorer Flash fallback.

One thing they've asked me to do is, after the videos finish playing (they're all a different length), fade them out and then fade a picture in place of the video --- think of it like a poster frame after the video.

Is this even possible? Can you get the timecode of a currently playing movie via Javascript or some other method? I know Flowplayer (http://flowplayer.org/demos/scripting/grow.html) has an onFinish function, is that the route I should take in lieu of the HTML5 video method? Does the fact that IE users will be getting a Flash player require two separate solutions?

Any input would be greatly appreciated. I'm currently using jQuery on the site, so I'd like to keep the solution in that realm if at all possible. Thanks!

Solution 1

You can view a complete list of events in the spec here.

For example:

$("video").bind("ended", function() {
   alert("I'm done!");
});

You can bind to the event on the element like anything else in jQuery...as for your comment question, whatever element you're delivering for IE, yes, it would need a separate handler rigged up to whatever event it provides.

For the other question about timecode, the timeupdate event occurs when it's playing, and the durationchange event occurs when the overall duration changes. You can bind to and use them just like I showed with the ended event above. With timeupdate you'll probably want the currentTime property, with durationchange you'll want the duration property, each of which you get directly off the DOM object, like this:

$("video").bind("durationchange", function() {
   alert("Current duration is: " + this.duration);
});

Solution 2

There is an OnEnded event associated with the video tag. However, it does not work for me in the current version of Google Chrome.

HTML 5 Video OnEnded Event not Firing

and see also

Detect when an HTML5 video finishes

For a general-purpose solution (supports video tag with fallback see)

http://camendesign.com/code/video_for_everybody or http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library or http://www.mediafront.org/

Solution 3

I used this code. It basically reloads the video which will get the poster to show again. Assuming you want the image at the end to be the same as the poster. I only have one video on the page so using the video tag works. I have my video set to autoplay on page load so I added the pause after the reload.

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>

Comments

[Andrew]

That's definitely helpful, but would a separate solution be required for IE users who, in my case, are being delivered a Flash player instead of native video?

[Nick Craver]

@Eric - I have an old test page here, works in chrome I'm on 6, but this worked back in 5 when I made it), not sure which others...they're just normal events though, if the browser supports them this should work.

[Eric J.]

@Andrew: Posed three solutions that use the video tag but also provide a fallback to use flash video.

[Eric J.]

Could you have a quick look at my old (unanswered) post stackoverflow.com/questions/2925851/… and let me know if you see the problem?

[Nick Craver]

@Eric - I can't say for sure without the media files if anything else is wrong, but remove the on from onended, it's just ended when you're calling .bind(), same with the onmouseover event, it's just mouseover for example.

[Andrew]

Nick, thanks for the quick answer. There are only a few videos throughout the site and all of them will be behaving similarly, but a quick test of this showed success in Firefox, Safari, and Chrome. Since Flowplayer is serving up IE, I'll use the built-in onFinish function for consistency. You rock!