【问题标题】：Firefox firing the 'pause' event on videos when the time is changed or it ends当时间改变或结束时，Firefox 会在视频上触发“暂停”事件
【发布时间】：2014-05-27 14:52:13
【问题描述】：

我在网站上嵌入了一个视频，但在 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 是正确的，但肯定是不正确的......

【问题讨论】：

标签： html events firefox video

【解决方案1】：

通过添加超时并检查视频是否在超时内暂停，我能够在 Firefox 上解决此问题。只有当video.paused 返回 true 时，我才执行我的代码：

const showOverlay = video => video.closest('.jsvideo').classList.remove('is--playing');

$$('.js-video video', video => {
    video.addEventListener('pause', () => {
        if (video.readyState !== 4) {
            return true;
        }

        // Firefox dispatches the pause event but 
        // doesn't set the video to paused 
        setTimeout(() => {
            if (video.paused) {
                showOverlay();
            }
        }, 250);
    });

    video.addEventListener('ended', showOverlay);
});

$$ 函数只是一个查询 DOM 的辅助函数。

我使用了 250 毫秒的超时，但我认为它可以显着减少（甚至为零），因为检查将在 pause 事件触发后执行。

实际的 UX 保持不变，因为超时不明显并且不会影响 UI 更新的速度。

【讨论】：

【解决方案2】：

我一直致力于监控 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 这样的库可以为您修复它（未在此事件链上测试）

【讨论】：