Question

我们正在播放服务器中的视频。我们会附加一个'ontimeupdate'事件，该事件会在视频播放时定期触发。对于慢速连接，我们可以将视频当前IS的位置与应该的位置进行比较。然后我们可以做一些我们需要做的事情，如果它是滞后的话。在Chrome，FF，IE中一切正常。在Safari中，当连接速度很慢时，事件只会触发两次。为什么要删除它？有没有办法在事件的处理程序内再次添加事件？感谢

Answer 1

HTML5音频/视频元素仍然不够完美。我注意到的最大问题是它在每个浏览器中的行为都不一样。我不知道为什么timeupdate事件会在Safari中停止触发，但您有一个选项是监视视频是否正在播放并独立验证信息。例如，

$(video).bind('play', function() {
    playing = true;
}).bind('pause', function() {
    playing = false;
}).bind('ended', function() {
    playing = false;
})

function yourCheck() {
    if (playing) {
        if (video.currentTime != timeItShouldBe) {
            //do something
        }
    } else {
        return;
    }
    setTimeout( yourCheck(), 100);
}

这样的效果。它并不完美，但目前的HTML5音频/视频元素也不是。祝你好运。

Answer 2

如果currentTime未更改，则不会触发事件，因此如果视频已停止播放缓冲区，则可能无法触发该事件。但是，您还可以收听其他活动：

1）“停滞” - 浏览器正在尝试加载视频文件，但它没有从网络中获取任何内容。

2）“等待” - 由于您的缓冲数据耗尽而播放已停止，但一旦有更多数据从网络进入，它可能会再次启动。这对你来说可能是最有用的。

3）“正在播放” - 播放已恢复。不要与“游戏”相混淆，这只是意味着它“试图”发挥。当视频实际播放时，此事件将触发。

4）“进展” - 浏览器从网络获得更多数据。有时只是经常发射，但它也可以在从“停滞”状态恢复之后发射。

请参阅spec以供参考。

我听说有些人说这些事件在某些浏览器中可能不可靠，但它们似乎在这里工作得很好：http://www.w3.org/2010/05/video/mediaevents.html

如果你想要格外谨慎，你也可以定期轮询（tpdietz写的超时）并检查视频的状态。 readyState属性会告诉您是否有足够的数据来显示当前帧（＆gt; = 2），足以在将来至少播放一段时间（＆gt; = 3）或足以全部播放到最后的方式（可能）。您还可以使用buffered属性查看在您播放的位置之前实际缓冲了多少视频，因此您可以粗略估计数据速率（如果您知道文件有多大）。 / p>

MDN对所有这些属性和事件都有great reference。

Safari html5视频timeupdate事件被禁用

2 个答案: