Javascript html5 视频“结束”事件在 chrome 和 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8153703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 video "ended" event not working in chrome and IE
提问by CCrawler
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).
我在页面上有两个按钮，它们触发两个函数，使两个 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);
});
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.
这在 firefox 和 safari 中工作正常，但在 chrome 和 IE 中会发生一些奇怪的事情。第一次加载页面时，“结束”事件似乎不起作用。但是，如果您刷新站点（或者如果您离线运行），它可以正常工作。
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/
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!!
提前致谢！！
回答by Travitron
Your test page isn't live anymore, so I can't check this, but I found that if looping is enabled for the tag (e.g., <video loop="loop">), the "ended" event wasn't firing in Chrome or IE (I didn't test in Firefox). Once I removed the loop attribute, the "ended" event fired in both browsers.
您的测试页不再存在，所以我无法检查这个，但我发现如果为标签启用循环（例如，<video loop="loop">），“结束”事件不会在 Chrome 或 IE 中触发（我没有） t 在 Firefox 中测试）。删除循环属性后，两个浏览器中都会触发“结束”事件。
HTML (with loop attribute, which will prevent the 'ended' event form firing):
HTML（带有循环属性，这将防止“结束”事件表单触发）：
Remove the loop attribute if you want the 'ended' event to fire...
如果您希望触发“结束”事件，请删除循环属性...
<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:
Javascript：
//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
alert('Video ended!');
});
回答by Simon_Weaver
If you are dynamically adding a <video>to your page that wasn't present in the HTML served from the server you may encounter a race condition that can result in the endedevent not being recognized - even if it was added correctly.
如果您正在<video>向您的页面动态添加一个不存在于服务器提供的 HTML 中的 ，您可能会遇到可能导致ended无法识别事件的竞争条件- 即使它被正确添加。
I am using knockoutjsto add a different template for phone vs desktop.
我正在knockoutjs为手机和桌面添加不同的模板。
<div data-bind="template: { name: videoTemplate, afterRender: initializeVideo }">
This dynamically creates me a <video> element and then calls initializeVideo()after the template is rendered (added to the DOM) to bind the events :
这会动态创建一个<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
On my screen the video gets a yellow border (proving the video was present in the DOM and there were no typos). However for some reason the browser isn't yet able to attach the endedevent to it - I assume perhaps it was not initialized yet.
在我的屏幕上，视频有一个黄色边框（证明视频存在于 DOM 中并且没有错别字）。但是由于某种原因，浏览器还不能将ended事件附加到它——我想它可能还没有初始化。
Chrome debugging tools shows that it is added, but it doesn't actually work!
Chrome调试工具显示添加了，但实际上并没有用！
It does this in Firefox, Chrome + IE10 which was slightly surprising.
它在 Firefox、Chrome + IE10 中做到了这一点，这有点令人惊讶。
One solution is this:
一种解决方案是这样的：
$('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');
The loadstartevent seems to be bindable right away.
该loadstart事件似乎可以立即绑定。
Another is perhaps just a setTimeout- or just bind the event on play.
另一个可能只是一个setTimeout- 或者只是在游戏中绑定事件。
