Javascript HTML5视频结束了多次调用的事件

我在用HTML5播放视频和结束活动时遇到问题。 我查看一些HTML内容，过了一段时间后播放视频。如果视频结束，我将再次显示HTML内容。这应该是一个循环。这是一场演讲

我的问题是，在第一次完整运行之后，ended事件将重复激发，HTML内容将显示false

以下是代码部分：

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();
    });
}

fadeHide（）

函数不会调用两次，只调用了

视频。addEventListener（'ended'，function（）{}；

fill多次调用。`fadeshow（）；将显示HTML内容。实际上，我使用的是最新版本的Chrome

有人知道哪里出了问题吗

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

您应该分配一次事件侦听器，或者每次播放时分配它时，您需要再次分离事件侦听器

function playVideo() {
    var video = $('video')[0];
    video.addEventListener('ended', function () {
        $('video').hide();
        video.removeEventListener('ended'); <<<<<<<
        fadeShow();
    }, false);
    video.play();  
}

---

并更新（使用较短的视频）

不要添加事件侦听器，然后手动删除它，只需使用名为“one”（）的内置命令即可

因此，您的代码将变得有点像这样：

函数播放视频（）{
var video=$（'video'）[0]；
$（'video'）。一个（'end'，函数（）{
$（'video'）.hide（）；
fadeShow（）；
});
video.play（）；
}

Ohh，你说得对！我怎么会错过这个：）。我将只添加一次事件。谢谢你的帮助！也许有几句话可以解释一下：每次调用

playVideo

时，都会创建一个新的事件处理程序，而之前创建的所有事件处理程序都会保留下来，而不会被覆盖。这就是为什么它第一次工作正常，然后开始多次开火的原因。@InsertUserName谢谢您的详细解释+1很抱歉，但问题仍然存在。我使用

removeEventListener

方法对其进行了测试。同样的问题。我检查了我是否真的调用了

play（）方法只有一次，没关系。还有什么会出错？在调试器中，我看到play角色只调用一次。视频结束后，将引发事件并删除事件。然后将显示内容，然后显示
fadeShow（）函数将被多次调用。@hofmeister您的html部分如何查找视频？您能在中生成测试用例吗？请看这里。同样的问题，在视频播放了两次之后。我用一个警报显示
fadeShow（）的调用。抱歉，我没有找到较短的视频。
function playVideo() {
    var video = $('video')[0];
    $('video').bind('ended', function () {
        $('video').unbind('ended');
        $('video').hide();
        fadeShow();
    });
    video.play();  
}