Событие завершения видео html5 не работает в Chrome и IE

У меня есть две кнопки на странице, которые запускают две функции, которые заставляют два видео html5 воспроизводиться, скрывать и отображать некоторые элементы (включая их самих) и вызывать другую простую функцию по завершении (которая заставляет видео перейти к первому кадру и приостановить, чтобы эффект работал должным образом).

$('#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);
});

Это отлично работает в firefox и safari, но в chrome и IE происходит что-то странное. При первой загрузке страницы знак "завершился "событие, похоже, не работает. Оно отлично работает, если вы обновите сайт (или если вы запустите его в автономном режиме).

Вы можете проверить код здесь, я сузил весь сайт до этой проблемы, так что вы можете посмотри лучше:

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

Реальные видео и изображения разные, но проблема в том, что тем же. Я ломаю голову, пытаясь решить эту проблему, но нигде не могу найти ответа.

Заранее спасибо !!