Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 651
CCrawler Avatar asked Nov 16 '11 14:11

CCrawler


1 Answers

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!');
});
like image 59
Travitron Avatar answered Sep 22 '22 17:09

Travitron