3

我在播放 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>

格雷茨

4

2 回答 2

12

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

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

你的小提琴更新了（视频更短）

于 2012-07-27T08:27:55.500 回答
1

不要添加事件侦听器然后手动删除它，而是尝试简单地使用名为“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 中的功能已经由社区中的大量人员在多个浏览器和操作系统上进行了多次测试。

于 2015-07-11T07:21:01.163 回答