How to detect whether HTML5 video has paused for buffering?

Question

I\'m trying to test whether a video is choppy. I have noticed that the pause event is not triggered when the video pauses for buffering. What is the best way to det

Answer 1

As per MDN docs 'waiting' event is -

Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

So seek or network request will trigger 'waiting'. Michael in the comments did point out that 'waiting' is reliable as of 2019 so I gave this a try and it worked!

let slowInternetTimeout = null;

let threshold = 3000; //ms after which user perceives buffering

video.addEventListener('waiting', () => {
    slowInternetTimeout = setTimeout(() => {
        //show buffering
    }, threshold);
});
video.addEventListener('playing', () => {
    if(slowInternetTimeout != null){
        clearTimeout(slowInternetTimeout);
        slowInternetTimeout = null;
    }
});