注意

Question

我在网站上嵌入了一个视频，我在Firefox中遇到了一些奇怪的行为。

每次通过单击时间滑块更改播放位置时，都会触发pause事件。同样，每次视频结束时，pause事件都会被触发，甚至在ended事件发生之前。

我首先想知道我写的一些JS中是否有错误（在播放时使视频更大，然后在暂停时缩小它 - code here）。但是，我只用这个简单的代码进行测试，行为仍然存在 -

$(document).ready(function(){

    video = $('#intro-video');

    video.on('pause', function(){
        alert('pause');
    });

});

这在其他浏览器中不会发生，这对Firefox来说是非常不受欢迎的行为。有没有办法防止这种情况发生？谢谢，

注意

如果有人有兴趣，这里是Pastebin containing my code的链接，但经过上述测试后我很确定这不是问题。

更新

我发现this thread表明所描述的行为实际上是设计的，但我发现很难相信。作者说IE浏览器，Opera和Safari错误，而Firefox正确，但肯定不正确......

Answer 1

我一直致力于监控HTML5视频/音频事件，并且我不时会发现您描述的内容：它在浏览器中并不一致，并且在相同的浏览器下，它们可能因版本而异。我建议你坚持这种情况下的规格：

ended event：它应该在结束事件之前触发暂停事件（假设您没有当前的媒体控制器，即多个同步媒体播放器）。这里的Firefox按预期完成。
seeking：它不应该触发暂停事件。规格中没有提到这一点。 Firefox似乎放弃了这一点。但是，如果视频在FF中暂停并且您正在搜索，则不会触发暂停事件。

在IE 11，FF 28和Chrome 34中，我发现在这两个事件中，只有Chrome符合此问题的规格。

您可以考虑询问Mozilla为什么会实施这样的行为？

如果你想绕过这种行为（不知道如何调用它），你需要在JS中构建自己的自定义控件。下面的代码说明如果您以编程方式查找视频的某个时间点（#seekBar div），则不会触发暂停事件：

<video id="intro-video" width="640" height="360" controls>
<source src="../media/360p.mp4" type='video/mp4' />
</video>
<div id="seekBar">Seek +5sec</div>
<script type="text/javascript">
$(document).ready(function(){
video = $('#intro-video');
videoJ = $('#intro-video')[0];

video.on('pause', function(){
    console.log('pause');
});
 video.on('play', function(){
    console.log('play');
});
video.on('ended', function(event){
    console.log('ended');
});
video.on('seeking', function(){
    console.log('seeking');
});
video.on('seeked', function(){
    console.log('seeked');
});
$('#seekBar').on('click',function(){
var currentT = videoJ.currentTime;
videoJ.currentTime = currentT + 5;//on click seek forward + 5 sec
});
});
</script>

您可以在此处查看以开始构建自己的controls。

也许像videojs这样的lib可以为你修复它（未在这一系列事件上进行测试）

Firefox触发“暂停”＃39;当时间改变或结束时视频上的事件

注意

更新

1 个答案: