html - 如何识别 html5 媒体元素停滞并等待更多媒体继续播放

Question

我正在使用 MediaSource 和 SourceBuffer 来播放 html5 视频。我正在按顺序获取 DASH 片段以继续不间断的视频播放。但有时，由于网络状况，SourceBuffer 会用完数据继续播放。当该数据到达时，播放恢复。但在此期间，视频看起来停滞不前。我想在媒体元素上添加一些视觉指示，表明它已暂停，因为它需要缓冲数据。

我尝试在视频上绑定(bind)“等待”和“停止”事件，但没有一个事件被触发。

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 对象来监视加载的缓冲区段(有关用法的示例，请参见 this answer here )。

这些可用于查看您是否有任何进展，然后使用 currentTime 与范围进行比较以查看时间是否在范围的末尾和/或范围是否在变化全部。

无论如何，希望这能提供一些意见。