2

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

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

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

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

谢谢。

4

2 回答 2

5

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

您可以使用媒体源扩展，它可以让您完全控制缓冲区并允许您手动检测停顿。但是，使用它的解决方案有点超出 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与范围比较来查看时间是否在范围的末尾和/或范围是否正在发生变化。

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

于 2015-04-22T16:23:04.843 回答
0

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

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

于 2015-04-22T12:45:48.637 回答