Rectangle 27 0

javascript html5 video "ended" event not working in chrome and IE?


//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
    alert('Video ended!');
});
<video id="video" loop="loop">
    <source src="whatever.mp4" width="320" height="240" type="video/mp4" />
    Your browser does not support this HTML5 video tag.
</video>

HTML (with loop attribute, which will prevent the 'ended' event form firing):

Remove the loop attribute if you want the 'ended' event to fire...

Your test page isn't live anymore, so I can't check this, but I found that if looping is enabled for the tag (e.g., <video loop="loop">), the "ended" event wasn't firing in Chrome or IE (I didn't test in Firefox). Once I removed the loop attribute, the "ended" event fired in both browsers.

^ Note that this is jQuery and not pure Javascript

Note
Rectangle 27 0

javascript html5 video "ended" event not working in chrome and IE?


//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
    alert('Video ended!');
});
<video id="video" loop="loop">
    <source src="whatever.mp4" width="320" height="240" type="video/mp4" />
    Your browser does not support this HTML5 video tag.
</video>

HTML (with loop attribute, which will prevent the 'ended' event form firing):

Remove the loop attribute if you want the 'ended' event to fire...

Your test page isn't live anymore, so I can't check this, but I found that if looping is enabled for the tag (e.g., <video loop="loop">), the "ended" event wasn't firing in Chrome or IE (I didn't test in Firefox). Once I removed the loop attribute, the "ended" event fired in both browsers.

^ Note that this is jQuery and not pure Javascript

Note