HTML5 video, how to detect a video is fully buffered?

Question

I have to fully buffer a html5 video before playing it.

But I can't find an universal solution.

I set the video to preload = 'auto';
I create a setInterval with a function looking each 200 ms for the video.buffered.end(0) property and I compare it to video duration.

On Chrome and Firefox, the video.buffered.end(0) reaches the video duration after a while => OK ! On IE9, the video.buffered.end(0) reaches +/- 85% of video duration and stop progressing. But the network indicates the video is fully loaded.

I tried to use video.seekable.end(0) but it is directly set to video duration.

So, how to detect an html5 video is fully buffered in IE9 (and other browsers) ?

Thanks for all !

May this be the answer to your question - [Force Chrome to fully buffer mp4 video](http://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video). — GingerHead, May 25 '14 at 01:57

score 1 · Answer 1 · edited May 23 '17 at 12:01

<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET', 'BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log("got it");
    var myBlob = this.response;
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    // myBlob is now the blob that the object URL pointed to.
    var video = document.getElementById("video");
    console.log("Loading video into element");
    video.src = vid;
    // not needed if autoplay is set for the video element
    // video.play()
   }
  }

xhr.send();
</script>

<video id="video" controls autoplay></video>

</body>
</html>

More reference is here Force Chrome to fully buffer mp4 video.

except that IE9 doesn't support createObjectURL http://caniuse.com/#search=createObjectURL — sebpiq, Mar 09 '15 at 22:13

HTML5 video, how to detect a video is fully buffered?

1 Answers1