火狐在时间改变或结束时在视频上触发“暂停”事件 [英] Firefox firing the 'pause' event on videos when the time is changed or it ends

问题描述

每当我通过点击时间滑块来改变播放位置时，暂停事件被触发。同样，每当视频结束时，即使在结束事件之前，也会触发暂停事件。

我首先想知道是否在我编写的某个JS中出现错误（为了使视频在播放时更大，然后缩短暂停时间 - 代码在这里）。然而，我测试了这个简单的代码，并且行为仍然存在 - $ / $>

$ $ $（document）.ready（function（）{

video = $（'＃intro-video'）;

video.on（'pause'，function（）{
alert（'pause'） ;
}）;

}）;

在其他浏览器中不会发生这种情况，这对于Firefox来说是非常不理想的行为。有没有办法来防止这种情况发生？如果有人有兴趣，这里是链接到 //pastebin.com/9Mw31sEprel =nofollow>包含我的代码的Pastebin ，但经过上面的测试后，我很确定这不是问题。

更新

我发现这个线程，这表明所描述的行为实际上是由设计，但我觉得很难相信。作者说，IE浏览器，Opera和Safari的错误，而火狐得到它的权利，但肯定这是不正确的...

解决方案

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

• 已结束事件：它应该在结束事件之前触发一个暂停事件没有当前媒体控制器，即多个同步媒体播放器）。在这里，Firefox按预期做到了。

正在寻找：它不应该激发一个暂停事件。规格中没有提到这一点。这里Firefox似乎放弃了球。但是，如果视频在FF中暂停，并且您正在寻找，则不会触发暂停事件。在IE 11，FF 28和Chrome 34中，我发现只有Chrome确实符合这个规范。两个事件的问题。



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



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



 < video id =intro-videowidth =640height =360controls> 
< source src =../media/360p.mp4type ='video / mp4'/> 
< / video> 
< div id =seekBar> Seek + 5sec< / div> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 video = $（'＃intro-video'）; 
 videoJ = $（'＃intro-video'）[0]; 
 $ b 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点击'，function（）{
 var currentT = videoJ.currentTime; 
 videoJ.currentTime = currentT + 5; //点击前进+ 5秒
}）; 
 }）; 
< / script> 
  

您可以在这里开始构建您自己的 controls

也许像 videojs 这样的lib可以为你解决这个问题（没有在这个事件链上测试过） p>


I have a video embedded on a website and I'm getting some odd behavior in Firefox.

Every time I change the playback position by clicking on the time slider, the pause event is fired. Similarly, every time the video ends the pause event is fired, even before the ended event.

I was first wondering if I had an error in some JS I had written (to make the video bigger on playback, and then shrink it on pause - code here). However, I tested with just this simple code and the behavior still exists -

$(document).ready(function(){

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

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

});

This doesn't happen in other browsers, and it is very undesirable behavior for Firefox. Is there a way to prevent this from happening? Thanks,

Note

If anyone is interested, here is the link to Pastebin containing my code, but after testing with the above I'm pretty sure this is not the issue.

Update

I have found this thread which suggests the behavior described about is actually by design, but I find that hard to believe. The author says that IE, Opera and Safari get it wrong while Firefox gets it right, but surely that's not correct...

解决方案

I have been working on monitoring events for HTML5 video/audio and from time to time I find something that you described: it is not consistent across browsers and given the same browser it can vary between versions. I would suggest you stick to the specs in this case:

• ended event: it should fire a pause event right before the ended event (given you have no current media controller ie multiple sync media players). Here Firefox does it as expected.

• seeking: it should not fire a pause event. There is no mention of that in the specs. Here Firefox seems to drop the ball. However if the video is paused in FF and you seek then the pause event is not fired.

Amongst IE 11, FF 28 and Chrome 34 I found that only Chrome does fit the specs to the letter for this question on both events.

You could consider asking Mozilla why is such a behavior implemented?

If you want to bypass this behavior (do not know how to call it) you need to build you own custom controls in JS. The code below illustrates that the pause event does not fire if you programmatically seek to a point in time of the video (the #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>  

You can have a look here to start building your own controls.

Maybe a lib like videojs can fix it for you (not tested on this chain of events)

这篇关于火狐在时间改变或结束时在视频上触发“暂停”事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！