html5视频"已结束"事件无法在Chrome和IE中运行

Question

我在页面上有两个按钮,触发两个功能,使两个html5视频播放,隐藏和显示一些元素(包括他们自己),并在结束时调用另一个简单的功能(这导致视频转到第一帧并暂停,效果正常).

$('#rotate').click(function rotate(){

$('#rotate').hide();
$('#front_view').css('z-index','2');
$('#back_view').css('z-index','3');

//this is the video:
    $('#body_animation').trigger("play").show().bind('ended', function () {
    $('#back_view').show();
    $('#front_view').fadeOut(500);
    $(this).hide();

    this.currentTime = 0;           
    this.pause();

    });

    $('#rotate_reverse').delay(2000).fadeIn(0);
});

这在firefox和safari中运行良好,但在chrome和IE中出现了一些奇怪的事情.页面第一次加载时,"已结束"事件似乎不起作用.但是,如果您刷新站点(或者如果您脱机运行它),它可以正常工作.

你可以在这里查看代码,我将所有网站缩小到这个问题,所以你可以更好地看到它:

http://www.hidden-workshop.com/test/

实际的视频和图像是不同的,但问题是相同的.我正试图解决这个问题,但我找不到任何答案.

提前致谢!!

Answer 1

您的测试页不再存在,所以我无法检查,但我发现如果为标签启用循环(例如<video loop="loop">),则"已结束"事件未在Chrome或IE中触发(我没有'在Firefox中测试).删除loop属性后,两个浏览器都会触发"已结束"事件.

HTML(带有循环属性,可防止"已结束"事件表单触发):

如果您希望触发'已结束'事件,请删除循环属性...

<video id="video" loop="loop">
    <source src="whatever.mp4" width="320" height="240" type="video/mp4" />
    Your browser does not support this HTML5 video tag.
</video>

使用Javascript:

//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
    alert('Video ended!');
});