html5 видео "закончилась" событие не работает в Chrome и IE

Question

У меня есть две кнопки на странице, которые запускают две функции, которые заставляют два 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 /

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

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

Answer 1

Ваша тестовая страница больше не работает, поэтому я не могу проверить это, но обнаружил, что если для тега включена зацикливание (например, <video loop="loop">), событие «закончившееся» не запускается в Chromeили IE (я не тестировал в Firefox).После того как я удалил атрибут цикла, в обоих браузерах сработало событие «окончено».

HTML (с атрибутом цикла, который предотвратит срабатывание формы события «завершено»):

Удалите атрибут цикла, если вы хотите, чтобы событие 'закончилась' было запущено ...

<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

Если вы динамически добавляете <video> на свою страницу, которой нет в HTML, полученном с сервера, вы можете столкнуться с условием гонки, которое может привести к тому, что событие ended не будет распознано - даже если оно было добавлено правильно.

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

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

Это динамически создает мне элемент <video> и затем вызывает initializeVideo() после того, как шаблон визуализирован (добавлен в DOM), чтобы связать события:

 $('video#flexVideo').off('ended').on('ended', (evt) =>
 {
       alert('ended fired');

 }).css('border', '2px solid yellow');   // add yellow border so we know element existed

На моем экране видео получает желтую рамку (доказательство того, что видео присутствовало в DOM и опечаток не было). Однако по какой-то причине браузер еще не может прикрепить к нему событие ended - я предполагаю, что оно, возможно, еще не было инициализировано.

Инструменты отладки Chrome показывают, что он добавлен, но на самом деле он не работает!

Это происходит в Firefox, Chrome + IE10, что немного удивляет.

Одним из решений является следующее:

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

Событие loadstart кажется связываемым сразу.

Другой, возможно, просто setTimeout - или просто связать событие при игре.