HTML5 <video> callbacks?
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);});
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_everybodyorhttp://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library or http://www.mediafront.org/
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>