如何识别html5媒体元素已停止并等待其他媒体继续播放 [英] How to identify that html5 media element is stalled and waiting for further media to continue playing

问题描述

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

I am working with MediaSource and SourceBuffer to play html5 video. I am sequentially fetching DASH fragments to continue uninterrupted video play. But sometimes, due to network conditions, SourceBuffer runs out of data to continue play. When that data arrives play resumes. But between this period, video looks stalled. I want to add some visual indication over media element, that it is paused as its buffering required data.

我尝试在视频上绑定'等待'和'停滞'事件，但没有一个事件被解雇。

I tried binding 'waiting' and 'stalled' events on video, but none of the events get fired.

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

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

Is there any other way to know whether media has been stalled and when it resumes back?

谢谢。

推荐答案

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

Using the stalled event is correct, but unfortunately, it does not always work as expected.

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

You could use Media Source Extension which gives you full control of the buffer and allow you to detect stalls manually. However, a solution using that is a bit out of scope here IMO.

您可以使用 timeupdate 事件也是。

• 让 setTimeout（）运行时间 - out value


• 在 timeupdate 事件中，清除此计时器并设置新的


• 如果计时器未重置，表示没有时间进度，如果没有暂停或结束，则假定停止

• Have a setTimeout() running with a time-out value
• Inside the timeupdate event, clear this timer and set a new
• If the timer isn't reset, it means there is no time progress and if not paused or ended, assume stalling

...
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 ... }
}
...

你可能需要做一些额外的检查以消除其他可能性等等，但这只是为了给你一般的想法，除了使用拖延事件。

You may have to do some additional checks to eliminate other possibilities and so forth, but this is only to give you the general idea, and in addition to using the stalling event.

另一种方法可能是监控加载缓冲段使用缓冲对象（参见 此答案 ，例如关于使用情况）。

A different approach could be to monitor the loaded buffer segments using the buffered object (see this answer here for example on usage).

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

These can be used to see if you have any progress, then use currentTime compared with the ranges to see if the time is at the end of a range and/or if the ranges are changing at all.

无论如何，希望这给予一些投入。

In any case, hope this give some input.

这篇关于如何识别html5媒体元素已停止并等待其他媒体继续播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！