How to check if html5 video is buffered enough to play without stopping to buffer?

Question

So My question is how would you check a video to see if its buffered enough to play but without stopping to buffer again and if this is true then play the video.

OR how would I check if the video has buffered 50% and then if it has play the video.

What I've tried (But it didn't seem right when I looked at the buff amount in the controls it seemed to not of buffered alot)

var Video = document.getElementById("videoPlayer");
Video.oncanplaythrough = function HasBuff() {
    alert("Is Buffered");
    Video.play();
};

As said before this code didnt seem to have alot of buff when looking in the controls of the video not even 1/4 was buffered, Prehaps What would be better is to check if the video has buffered 50% or so and then play it, though I'm not to sure of how to do this or go about it.

Thank you for reading, I'm at "beginer level" so Sorry if this seems an easy or silly question but we all have to start somewhere right? :) Thanks again.

score 2 · Answer 1 · edited Aug 17 '15 at 07:19

2

I think you can use this onplaying event

var vid = document.getElementById("myVideo");
vid.onplaying = function() {
    alert("The video is now playing");
};

or if you want to check the video is currently buffer you can use onwaiting event more info here http://www.w3schools.com/tags/ref_av_dom.asp

edited Aug 17 '15 at 07:19

chathux

821
8
17

answered Aug 17 '15 at 06:51

Grald

454
5
15

score 1 · Answer 2 · answered Oct 01 '15 at 06:56

I made a little test:

var vid = document.getElementById("video");

var buffered = function() {
    var bufferedPercent =
        vid.duration > 0 && vid.buffered.length > 0 ?
        vid.buffered.end(0) / vid.duration * 100 :
        0;
    return 'buffered ' + bufferedPercent.toFixed(0) + '%';
};

vid.onprogress = function() {
    console.log('progress: ' + buffered());
};

vid.oncanplay = function() {
    console.log('canplay: ' + buffered());
};

vid.oncanplaythrough = function() {
    console.log('canplaythrough: ' + buffered());
};

vid.onsuspend = function() {
    console.log('suspend: ' + buffered());
};

On Chrome I get output like this:

canplay: buffered 5%
canplaythrough: buffered 5%
progress: buffered 15%
progress: buffered 25%
suspend: buffered 25%

With my test video "buffered" never gets beyond 25% (autoplay disabled). On Firefox in stops at 19%.

So it looks like you cannot force the browser to buffer more than it wants to. I also tried calling load() explicitly, no difference. Maybe if you seek forward it might buffer more, but then it might discard the already buffered part (I didn't try that out). But the browsers seemed to buffer quite a bit more after firing canplaythrough event, and then fired suspend event when they stopped buffering, so maybe you can use that.

In summary, the options I see are:

The ideal way: Trust the browser's estimation on when to start playing (autoplay = true).
The hacky way: Wait for the suspend event and start the video then (autoplay = false). These two browsers seemed to buffer a bit more that way.

Something like this:

vid.onsuspend = function() {
    if (vid.paused) {
        vid.play();
    }
};

How to check if html5 video is buffered enough to play without stopping to buffer?

2 Answers2