How to identify that html5 media element is stalled and waiting for further media to continue playing

Question

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?

Thanks.

Answer 1

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

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.

You could possible get around using the timeupdate event as well.

• 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

Example (untested):

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

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.

Answer 2

Here is the reference http://www.w3schools.com/tags/ref_av_dom.asp

I think you are looking for the event suspend: fires when the browser is intentionally not getting media data