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

Question

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

我尝试在视频上绑定 'waiting' 和 'stalled' 事件，但是 none 事件被触发了。

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

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

谢谢。

Answer 1

这里是参考http://www.w3schools.com/tags/ref_av_dom.asp

我认为您正在寻找事件 suspend：当浏览器有意不获取媒体数据时触发

Answer 2

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

您可以使用 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和范围比较看时间是否在一个范围的末尾and/or如果范围在变化完全没有。

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