Fully buffer video in Chrome Fully buffer video in Chrome google-chrome google-chrome

Fully buffer video in Chrome


Because S3 supports partial downloads, Chrome initially buffers "only what's needed" in front of the playhead and then stops buffering. It will continue buffering "only what's needed" when the video starts playing. This means that depending on the user's download speed it will stop buffering now and then, just because it has enough buffer to play continuously.

But if you pause the video after having played some, Chrome will not stop buffering and go through all the way to the end.

This example exploits that technique to entirely buffer the video off screen before showing it on the page.

Tested on Chrome 32

// Create video in background and start playingvar video = document.createElement('video');video.src = 'video.mp4';video.controls = true;video.muted = true; video.play();// Pause immediately after it starts playing.video.addEventListener("timeupdate", function() {    if (this.currentTime > 0) {        this.pause();        video.muted = false;        video.currentTime = 0        this.removeEventListener("timeupdate", arguments.callee, false);        // When whole video is buffered, show video on page        video.addEventListener("progress", function() {            if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) == 1) {                document.body.appendChild(video);                this.removeEventListener("progress", arguments.callee, false);            }        }, false);    }}, false);


Have you tried the canplaythrough event?

Not in the traditional sense, I mean. Rather in a 'hacky' way. canplaythrough is triggered when the browser detects that it has enough video buffered to play continuously without pausing. I am guessing that this event triggers about the same time as chrome pauses buffering. If that's the case, it could be use to trigger a request for rest of the video.


I have not tried it, but the HTML5 video object contains a buffered property

var video = document.createElement('video');video.buffered.start(0);video.buffered.end(0);

Could you try monitoring the buffered (Such as with this thread chrome html5 video buffered.end event)

Then continually change the current time to right before the buffered time using

video.currentTime = video.buffered.end(0) - 1;