Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fully buffer video in Chrome

Is it possible to fully buffer HTML5 video in Chrome (and Opera)?

I host the movie in .mp4 and .webm on amazon S3. In HTML I use standard <video> tag. The server responds with status 206 Partial Content. It is great, as it allows the browser to download any part of the video but I need to be able to seek instantly to any part of the file.

I tried:

  1. .PROGRESS event. When Chrome stops buffering the first part, the connection is killed. The next parts are downloaded in new connection, so JavaScript isn't able to continue checking total downloaded data. Even if it could, the old data isn't stored in cache. This method works in Firefox and Safari. Heck, even in IE10!
  2. XHRS. I am able to fully download the movie, but when the video starts playing, Chrome tries to download the movie from the server again. I even tried to pass the movie into HTML in base64, but that's to much data
  3. FileAPI. Chrome isn't able to create BLOB big enough and crashes.

Any help is welcome!

ps. I am aware of od and similar questions, but I hope something changed since they were asked.

like image 281
Michal Avatar asked Feb 07 '14 13:02

Michal


People also ask

How do I fully buffer a video?

Click on the “Set global preferences now” link to access the preferences. Step 2: In the preferences, enable the option “Ensure that videos are buffered even if they are paused”. That's it, whenever you will pause a video, it's buffering will not stop.

What is buffer size in video?

buffersize: The size of the main buffer. Once streaming data comes into the main buffer, it is immediately split into the audio and video buffers. The default size of the main buffer is 1.5MB for HD models, 3MB for XD models, and 6MB for 4K models. vcdbsize: The size of the video-coded data buffer.


1 Answers

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 playing
var 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);
like image 113
Duvrai Avatar answered Oct 15 '22 07:10

Duvrai