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

javascript jquery html5-video
Edit
Report