Html5 video "ended" event does not work in chrome and IE

Question

I have two buttons on the page that call two functions that create two html5 video files, hide and show some elements (including themselves), and call another simple function at the end (which causes the video to go to the first frame and pause for the effect to work correctly).

$('#rotate').click(function rotate(){ $('#rotate').hide(); $('#front_view').css('z-index','2'); $('#back_view').css('z-index','3'); //this is the video: $('#body_animation').trigger("play").show().bind('ended', function () { $('#back_view').show(); $('#front_view').fadeOut(500); $(this).hide(); this.currentTime = 0; this.pause(); }); $('#rotate_reverse').delay(2000).fadeIn(0); }); 

This works fine in firefox and safari, but something strange happens in chrome and IE. The first time the page loads, the "ended" event does not work. It works great if you upgrade the site (or if you run it offline).

Here you can check the code, I narrowed down the whole site to this problem, so you can see it better:

http://www.hidden-workshop.com/test/

Actual videos and images are different, but the problem is the same. I am trying to solve this problem, but I can not find the answer anywhere.

Thanks in advance!

Answer 1

Your test page is no longer active, so I can’t check it, but I found that if the inclusion of a loop is enabled for the tag (for example, <video loop="loop"> ), the "completed" event did not fire in Chrome or IE (I not tested in Firefox). As soon as I remove the loop attribute, the completed event fires in both browsers.

HTML (with a loop attribute that will prevent the completion of the event form from completing):

Remove the loop attribute if you want the event to be completed ...

 <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> 

JavaScript:

 //NOTE: This only fires if looping is disabled for the video! $("#video").bind("ended", function() { alert('Video ended!'); }); 

Answer 2

If you dynamically add a <video> to your page that is not in the HTML message from the server, you may encounter a race condition that may result in the event ended not being recognized - even if it was added correctly.

I use knockoutjs to add another template for phone and desktop.

 <div data-bind="template: { name: videoTemplate, afterRender: initializeVideo }"> 

This dynamically creates a <video > element for me, and then calls initializeVideo() after rendering the template (added to the DOM) to bind events:

  $('video#flexVideo').off('ended').on('ended', (evt) => { alert('ended fired'); }).css('border', '2px solid yellow'); // add yellow border so we know element existed 

On my screen, the video gets a yellow frame (confirmation that the video was in the DOM and there were no typos). However, for some reason, the browser still cannot attach the ended event to it - I assume that it is not yet initialized.

Chrome debugging tools show that they have been added, but in fact it does not work!

He does this in Firefox, Chrome + IE10, which was a bit surprising.

One solution:

  $('video#flexVideo').off('loadstart').on('loadstart', (evt) => { $('video#flexVideo').off('ended').on('ended', (evt) => { alert('ended fired'); }).css('border', '2px solid yellow'); }).css('border', '2px solid orange'); 

The loadstart event seems to be bound immediately.

Another, maybe just setTimeout - or just binds an event to a game.