HTML5视频结束事件被多次调用

Question

我有一个与HTML5视频播放和结束事件有关的问题。 我查看了一些HTML内容，在过期时间后播放视频。当视频结束时，我将再次显示HTML内容。这应该循环。这是为演示而设计的。

我的问题是，在第一次完整运行之后，结束事件会重复触发，导致HTML内容显示错误。

以下是代码部分：

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();函数不会被调用两次，只有video.addEventListener('ended', function () {};会被多次调用。`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>

问候

- Andre Hofmeister

---

你可以在 jsfiddle 上创建一个测试用例吗？ - bart s

点击此处链接。同样的问题，在视频显示两次后出现。我用一个提示框展示了fadeShow();的调用。抱歉，我没有找到更短的视频。 - Andre Hofmeister

Answer 1

您应该在首次分配或每次播放时分配事件监听器，您需要再次分离事件监听器。

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

编辑: 我用这个示例在chrome中进行了测试，即使您删除事件监听器，它也会开始多次触发。看来存在一个问题，即删除事件监听器不起作用。

您应该将事件绑定/解除绑定到jQuery，然后只有一个事件结束。

function playVideo() {
    var video = $('video')[0];
    $('video').bind('ended', function () {
        $('video').unbind('ended');
        $('video').hide();
        fadeShow();
    });
    video.play();  
}

并且你的 jsfiddle 已更新（含更短的视频）

- bart s

---

哦，你说得对！我怎么会错过这个呢 :). 我会添加事件只一次。谢谢你的帮助！ - Andre Hofmeister

每次调用 playVideo 都会创建一个新的事件处理程序，而之前创建的所有事件处理程序都将保留而不被覆盖。这就是为什么它在第一次正确运行并在之后开始多次触发的原因。 - insertusernamehere

@insertusernamehere 感谢您的详细解释。+1 - bart s

抱歉，问题仍然存在。我使用removeEventListener方法进行了测试，但是仍然出现同样的问题。我检查过我是否只调用了一次play();方法，这是没问题的。还有什么可能出错了吗？ 在调试器中，我发现播放部分只会被调用一次。视频结束后，事件将被触发并且该事件将被删除。然后内容将显示，在此之后fadeShow();函数将多次被调用。 - Andre Hofmeister

@hofmeister，你的视频的HTML代码是什么样子的？ - bart s

Answer 2

不要添加事件监听器再手动删除它，尝试使用内置命令"one"( https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third- )。

因此，您的代码将变得类似于这样:

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

这段话有点简略，并且更依赖于API本身。我认为这通常是一个好的实践，因为API中的函数已经在社区的许多人和多个浏览器和操作系统上进行了多次测试。

- Muhammad bin Yusrat