Question

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

我的问题是，在第一次完成运行后，结束的事件将重复触发，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>

格尔茨

Answer 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更新了（视频时间更短）

Answer 2

不要添加事件监听器然后手动删除它，而只需使用名为＆＃34; one＆＃34;的内置命令。（https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third-）

所以你的代码会变得像这样：

＆＃13;

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

＆＃13;

这有点简短，更依赖于API本身。我认为这通常是一种很好的做法，因为API中的功能已被多个浏览器和操作系统中的社区中的大量人员多次测试。

HTML5视频已多次调用事件

2 个答案: