Question

I have two buttons on a page that trigger two functions that make two html5 video play, hide and show some elements (including themselves), and call another simple function on ended (that causes the video to go to the first frame and pause, for the effect to work properly).

$('#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 in chrome and IE something strange happens. The first time the page loads, the “ended” event doesn’t seem work. It works fine if you refresh the site (or if you run it offline), though.

You can check the code in here, I narrowed all the site to this problem, so you can see it better:

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

The actual videos and images are different, but the problem is the same. I’m busting my head trying to solve this thing, but I can’t find the answer anywhere.

Thanks in advance!!

Answer 1

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.

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

Remove the loop attribute if you want the ‘ended’ event to fire…

<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!');
});