Safari html5 视频时间更新事件被禁用

Question

我们正在从服务器播放视频。 我们附加一个“ontimeupdate”事件，该事件在视频播放时定期触发。 对于慢速连接，我们可以将视频当前所在位置与应有位置进行比较。 然后我们可以做一些其他我们需要做的事情，如果它是滞后的。 在 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）“进度”-浏览器从网络获取更多数据。有时只是偶尔触发，但从“停滞”状态恢复后也可以触发。

请参阅规格以供参考。

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

如果您想格外小心，您还可以定期轮询（如 tpdietz 所写的超时）并检查视频的状态。

readyState

属性将告诉您是否有足够的数据来显示当前帧 ( >= 2 )、是否足以继续播放至少一点点的未来 ( >= 3 ) 或是否足以一直播放到下一帧结束（可能）。您还可以使用

buffered

属性查看在播放之前实际缓冲了多少视频，以便您可以粗略估计数据速率（如果您知道文件有多大）。

MDN 对所有这些属性和事件都有很好的参考资料。