如何识别 html5 媒体元素已停止并等待进一步的媒体继续播放

我正在与MediaSource and SourceBuffer播放 html5 视频。我按顺序获取 DASH 片段以继续不间断的视频播放。但有时，由于网络状况，SourceBuffer数据耗尽无法继续游戏。当该数据到达时，比赛将继续。但在此期间，视频看起来停滞不前。我想在媒体元素上添加一些视觉指示，表明它在缓冲所需数据时暂停。

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

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

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

Thanks.

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

你可以使用媒体源扩展这使您可以完全控制缓冲区并允许您手动检测停顿。然而，使用它的解决方案有点超出了我的范围。

你可以使用timeupdate事件也是如此。

• Have a 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 event.

另一种方法是使用以下命令来监视加载的缓冲区段：buffered对象（参见这个答案在这里例如使用情况）。

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

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