CODEWITHSUNDEEP
htmlvideointernet-explorer-9buffer
Dany
Dany

Reputation: 91

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

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

But I can't find an universal solution.

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 !

Upvotes: 3

Views: 1163

Answers (1)

Igor Gilyazov
Igor Gilyazov

Reputation: 777

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

Upvotes: 1

Related Questions