javascript 多次调用 HTML5 视频结束事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11684056/
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 called several times
提问by Andre Hofmeister
I have a problem with playing a video in HTML5 and the ended Event. I view some HTML content and after a expired time I play a video. Is the video ended I will show the HTML content again. This should loop. Its for a presentation.
我在播放 HTML5 视频和结束的事件时遇到问题。我查看了一些 HTML 内容，并在过期后播放视频。视频结束了我会再次显示 HTML 内容。这应该循环。它的演示文稿。
My problem is, that after the first complete run, the ended event will fired repeatedly and the HTML content will displayed false.
我的问题是，在第一次完整运行后，结束事件将重复触发，HTML 内容将显示为 false。
Here is the code part:
这是代码部分：
function playVideo() {
var video = $('video')[0];
video.addEventListener('ended', function () {
$('video').hide();
fadeShow();
}, false);
video.play();
}
function fadeHide() {
$('#content').fadeOut(1200, function () {
$('div ul[id^=item]').each(function () {
$(this).hide();
});
$('li[class^=visitor] span[id]').each(function () {
$(this).hide();
});
playVideo();
});
}
The fadeHide();function will not called two times, just the video.addEventListener('ended', function () {};fill called several times. `fadeshow(); will display the HTML content. Actually I use the newest version of Chrome.
该fadeHide();函数不会调用两次，只会video.addEventListener('ended', function () {};调用多次填充。`淡出（）; 将显示 HTML 内容。其实我用的是最新版本的Chrome。
Does anyone have an idea what went wrong?
有谁知道出了什么问题？
EditHTML video code. I hide the video with css.
编辑HTML 视频代码。我用css隐藏了视频。
<video>
<source src="video/mp4/xxx.mp4" type="video/mp4" />
<source src="video/ogg/xxx.ogg" type="video/ogg" />
<source src="video/webm/xxx.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Greetz
格雷茨
回答by bart s
You should assign the event listener once or when you assign it upon play everytime, you need to detach the event listener again.
您应该分配一次事件侦听器，或者每次在播放时分配它时，您都需要再次分离事件侦听器。
function playVideo() {
var video = $('video')[0];
video.addEventListener('ended', function () {
$('video').hide();
video.removeEventListener('ended'); <<<<<<<
fadeShow();
}, false);
video.play();
}
EDIT: I tested in chrome with this fiddleand indeed even if you remove the eventlistener it starts to fire multiple times. It seems there's an issue that removing the event listener does not work correctly.
编辑：我用这个小提琴在 chrome 中进行了测试，实际上即使你删除了事件监听器，它也开始多次触发。似乎存在删除事件侦听器无法正常工作的问题。
You should change the event binding / unbinding to jQuery then there is only one ended event.
您应该将事件绑定/解除绑定更改为 jQuery，然后只有一个结束事件。
function playVideo() {
var video = $('video')[0];
$('video').bind('ended', function () {
$('video').unbind('ended');
$('video').hide();
fadeShow();
});
video.play();
}
And your fiddleupdated (with shorter video)
和你的小提琴更新（更短视频）
回答by Muhammad bin Yusrat
Instead of adding an event listener and then manually removing it, try simply using the built in command called "one" (https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third-)
与其添加事件侦听器然后手动删除它，不如尝试简单地使用名为“one”的内置命令（https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player。 md#one-first-second-third-)
So your code will become somewhat like this:
所以你的代码会变得有点像这样：
function playVideo() {
var video = $('video')[0];
$('video').one('ended', function () {
$('video').hide();
fadeShow();
});
video.play();
}Which is a little brief, and more dependent on the API itself. That I believe is generally a good practice because the functions in the API have been tested multiple times by a large number of people in the community over multiple browsers and operating systems.
这有点简短，更依赖于 API 本身。我认为这通常是一个很好的做法，因为 API 中的功能已经由社区中的大量人员在多个浏览器和操作系统上进行了多次测试。
