HTML5视频已多次调用事件

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

编辑:我用这个小提琴测试铬,事实上即使你删除eventlistener它开始多次开火.似乎有一个问题是删除事件侦听器无法正常工作.

您应该将事件绑定/解除绑定更改为jQuery,然后只有一个已结束的事件.

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

和你的小提琴更新(更短视频)