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＆gt;在渲染模板（添加到DOM）以绑定事件后，然后调用initializeVideo()：

 $('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 - 或者只是在游戏中绑定事件。