HTML5视频结束事件多次调用

Question

我在播放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 () {}; 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>

格蕾兹

Answer 1

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

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

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

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

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

和您的小提琴更新（视频较短）

Answer 2

与其添加事件侦听器然后手动将其删除，不如尝试简单地使用名为“一个”的内置命令（ 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中的功能已经由社区中的许多人通过多个浏览器和操作系统进行了多次测试。