Javascript html5视频“；完"；事件在chrome和IE中不起作用

我在一个页面上有两个按钮，触发两个函数，使两个html5视频播放、隐藏和显示某些元素（包括它们本身），并在结束时调用另一个简单函数（使视频转到第一帧并暂停，以便效果正常工作）

这在firefox和safari中运行良好，但在chrome和IE中会发生一些奇怪的事情。第一次加载页面时，“结束”事件似乎不起作用。不过，如果您刷新站点（或者脱机运行），它可以正常工作

你可以在这里查看代码，我将所有站点的范围缩小到这个问题，这样你可以更好地看到它：

实际的视频和图像是不同的，但问题是相同的。我绞尽脑汁想解决这件事，但我到处都找不到答案

---

提前谢谢

您的测试页面不再处于活动状态，因此我无法对此进行检查，但我发现如果为标记启用了循环（例如，

），则“结束”事件不会在Chrome或IE中触发（我没有在Firefox中测试）。删除循环属性后，两个浏览器都会触发“ended”事件

HTML（带有循环属性，可防止触发“已结束”事件表单）：

//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
    alert('Video ended!');
});

如果希望触发“ended”事件，请删除循环属性

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

---

如果您正在动态地将服务器提供的HTML中不存在的

添加到页面中，您可能会遇到竞态条件，从而导致无法识别

已结束的
事件，即使该事件已正确添加

我正在使用
knockoutjs
为手机和桌面添加不同的模板

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

在我的屏幕上，视频有一个黄色边框（证明视频存在于DOM中，并且没有输入错误）。然而，由于某种原因，浏览器还不能将
end
事件附加到它上-我假设它可能还没有初始化

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
——或者只是在播放时绑定事件。
^请注意，这是jQuery，而不是纯Javascript
 $('video#flexVideo').off('ended').on('ended', (evt) =>
 {
       alert('ended fired');

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

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