多次调用 HTML5 视频结束事件答案

【问题标题】：HTML5 video ended event called several times多次调用 HTML5 视频结束事件
【发布时间】：2012-07-27 08:20:31
【问题描述】：

我在播放 HTML5 视频和结束事件时遇到问题。我查看一些 HTML 内容，并在过期后播放视频。视频是否结束我将再次显示 HTML 内容。这应该循环。它的演示文稿。

我的问题是，第一次完整运行后，end 事件会重复触发，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(); 函数不会被调用两次，只是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>

问候

【问题讨论】：

你能在jsfiddle做一个测试用例吗？
看这里link。同样的问题，视频播放两次后。我提醒您拨打fadeShow();。抱歉，我还没有找到更短的视频。

标签： javascript html events video

【解决方案1】：

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

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

编辑：我用这个fiddle 在 chrome 中进行了测试，实际上即使你删除了 eventlistener，它也会开始多次触发。似乎有一个问题是删除事件侦听器无法正常工作。

您应该将事件绑定/取消绑定更改为 jQuery，然后只有一个结束事件。

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

your fiddle 更新（视频更短）

【讨论】：

哦，你说得对！我怎么能错过这个:)。我将只添加一次事件。感谢您的帮助！
也许用几句话来解释一下：每次调用playVideo 时都会创建一个new 事件处理程序，而之前创建的所有事件处理程序都将保留而不是被覆盖。这就是为什么它第一次正常工作，然后开始多次发射。
@insertusernamehere 感谢您的详细解释。 +1
对不起，问题依然存在。我使用removeEventListener 方法对其进行了测试。同样的问题。我检查了我是否真的只调用了一次 play(); 方法，没关系。还有什么可能出错的？在我看到的调试器中，播放部分只会调用一次。视频结束后，该事件将引发，该事件将被删除。然后会显示内容，之后会多次调用fadeShow();函数。
@hofmeister 您的 html 部分如何查找视频？

【解决方案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 中的功能已经由社区中的大量人员在多种浏览器和操作系统上进行了多次测试。

【讨论】：