如何识别html5媒体元素已停止并等待其他媒体继续播放

Question

我正在MediaSource和SourceBuffer播放html5视频。我正在依次获取DASH片段，以继续进行不间断的视频播放。但是有时候，由于网络条件的原因，SourceBuffer数据用完了继续播放。当数据到达时，播放恢复。但是在此期间，视频看起来停滞了。我想在媒体元素上添加一些视觉指示，因为它缓冲了所需的数据，所以它被暂停了。

我尝试在视频上绑定“等待”和“停滞”事件，但没有触发任何事件。

var vid = $('video')[0];
vid.addEventListener('stalled', function(e) { console.log('Media stalled...');})

还有其他方法可以知道媒体是否已停止以及何时恢复播放吗？

谢谢。

Answer 1

使用停止事件是正确的，但是不幸的是，它并不总是能按预期工作。

您可以使用Media Source Extension，它可以完全控制缓冲区并允许您手动检测停顿。但是，使用此方法的解决方案在IMO中超出了范围。

您也可以使用该timeupdate事件。

• 有setTimeout()一个超时值运行
• 在timeupdate事件内部，清除此计时器并设置新的
• 如果计时器未重置，则表示没有时间在进行，如果未暂停或结束，则假定停滞

示例（未试用）：

...
var timerID = null, isStalling = false;

vid.addEventListener("timeupdate", function() {
    clearTimeout(timerID);
    isStalling = false;
    // remove stalling indicator if any ...
    timerID = setTimeout(reportStalling, 2000);  // 2 sec timeout
});

// integrate with stalled event in some way -
vid.addEventListener("stalled", function() {isStalling = true})

function reportStalling() {
  if ((!vid.paused && !vid.ended) || isStalling) { ... possible stalling ... }
}
...

您可能需要做一些额外的检查以消除其他可能性，等等，但这只是为了给您提供总体思路，而且还使用了stalling事件。

另一种方法可能是使用buffered对象监视加载的缓冲区段（例如，有关用法，请参见此处的答案）。

这些可用于查看您是否有任何进展，然后currentTime与范围进行比较，以查看时间是否在范围的尽头和/或范围是否正在改变。

无论如何，希望这能有所帮助。