javascript - Fully buffer video in Chrome - Stack Overflow

admin管理员组

文章数量:1200790

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.

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.

• javascript
• html
• google-chrome
• video
• buffer

Share Improve this question Follow edited Feb 9, 2014 at 22:09 23k 1,39933 gold badges2525 silver badges5454 bronze badges asked Feb 7, 2014 at 13:25 MichalMichal 75322 gold badges66 silver badges2323 bronze badges 3

• 1 have you had a look at the two options from the answer here... either the XHR solution, or the more challenging option of rolling your own login using MediaSource APIs.... stackoverflow.com/questions/18251632/… – Offbeatmammal Commented Feb 9, 2014 at 23:43
• @Offbeatmammal - I've tried XHR, but not the custom media api. Will have to try that. – Michal Commented Feb 10, 2014 at 19:39
• just an idea... maybe you could consider creating different video tags and preload a different video fragment in each one of them. Then, on seek, translate the currentTime and play request to the appropriate one. Definitely not a nice thing to do, but may be an option. You could experiment with Media Fragments if length and buffer times are known in advance... – jbalsas Commented Feb 10, 2014 at 21:54

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 9 +50

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);

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;

Be careful using video.buffered.end(0). According to my experience, it works with Chrome but it fails with IE9.

I don't know what happens, IE9 seems to forget to do the last update to video.buffered.end() at the end of the buffering process and the video.buffered.end(0) is a little bit smaller than video.duration.

So, if you think your page could be used with another browser than Chrome, don't use video.buffered.end(0).

There are several ways to load a video all the way then play it:
1. There is the goody goody browser developer would be proud way:

var video = document.createElement('video');
video.src='myvideo.mp4';
document.appendChild(video);
video.load();
video.addEventListener('loadedmeta',function(){
video.play()
});

2. And there is the lazy "But, I'll get carpel tunnel!" developer way:

<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video>

Sources:
http://www.w3schools.com/tags/tag_video.asp
how to run js code when video is fully buffered/loaded
How do I add new Video entirely from JavaScript?
javascript with html <video> load() & play() function not firing http://www.w3.org/wiki/HTML/Elements/video

本文标签： javascriptFully buffer video in ChromeStack Overflow