Is it possible to preload an entire HTML5 video source before playing?

Question

Solution

I created a working example of the accepted answer which uses an XHR and reports loading progress through a bar.

It's available here.

https://github.com/synthecypher/full-preload

Question

I've noticed when I create a <video> element with sources and call load() it will load to about 36% and then stops unless you play() it, at which time it'll continue to load the rest of the video as it plays.

However, I want to ensure the entire video loaded before hand as it's an element in a timed exercise and if the internet connection drops during the exercise I will have to detect such an event and restart the exercise.

I assume this is a built in feature of the HTML5 media elements but is it possible to override this native functionality?

I've attempted to load the entire video source as a arraybuffer using an XMLHttpRequest which is then converted to a blob and set as the src of a <source> element in my <video> element.

This does work however, it isn't ideal as I can't report the progress of download to the user through the use of progress bar as an XHR is a syncronous operation and will cause my JavaScript to hang until a response is received. I know XHR2 now has this funtionality but I have to support IE8+ so that's not an option.

Is there an easier more elegant solution to my problem, which will report progress?

Requirements

Need to preload the entire <video> element's <source> before playing.
Need to report progress of the

Have you tried the [`preload`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) attribute? — Oriol, Mar 03 '15 at 18:43
You do know that the video tag is not supported by IE8, right? — jlowcs, Mar 03 '15 at 18:43
@jlowcs: I'm wrapping it in videos which creates a Flash fallback if required. — jshbrntt, Mar 03 '15 at 19:01
@Oriol: Yes but ```preload="auto"``` will only preload it partially and in some cases on iOS not at all. — jshbrntt, Mar 03 '15 at 19:03
@jlowcs does anybody actually still care about ie8? Must users that actually care about what you're doing will be using a modern browser. I also think the same way for app, I'm not making my apps hard to maintain because there are some still using android 2.3. Too bad, upgrade your device. :) — Panama Jack, Mar 03 '15 at 19:12
@PanamaJack sadly some big companies still have systems on location that only have IE8 and are slow moving when it comes to rolling out up to date software and hardware. — jshbrntt, Mar 03 '15 at 19:56
@SyntheCypher you are correct about that my company being one of them.:) But most of us use Chrome or FF here. Also you are doing a flash fallback so you are covering the crap browser anyway. :) — Panama Jack, Mar 03 '15 at 19:58
@PanamaJack well in matter of fact they should be getting FF in the coming months but this product has to deliver before then. Yes videojs is handling Flash fallback. — jshbrntt, Mar 03 '15 at 20:07

score 13 · Accepted Answer · edited Feb 17 '19 at 13:41

13

If you have the source, you can pre-download the data to a blob in JavaScript and play when ready.

The following should work if the video is on your server. If not, you'll run into CORS issues.

var video = document.getElementById("Your video element id")

var url = "Some video url"

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";

xhr.onload = function(oEvent) {

    var blob = new Blob([oEvent.target.response], {type: "video/yourvideosmimmetype"});

    video.src = URL.createObjectURL(blob);

    //video.play()  if you want it to play on load
};

xhr.onprogress = function(oEvent) {

    if (oEvent.lengthComputable) {
        var percentComplete = oEvent.loaded/oEvent.total;
        // do something with this
    }
}

xhr.send();

edited Feb 17 '19 at 13:41

shA.t

16,580
5
54
111

answered Mar 03 '15 at 19:08

Sam

995
9
16

This works thank you, I've also included a working example in my original post. – jshbrntt Mar 03 '15 at 23:05
http://stackoverflow.com/questions/28852298/why-cant-my-android-device-play-html5-video-loaded-as-blob-via-xhr – jshbrntt Apr 10 '15 at 16:08
Unfortunately chromium crashes when the blob is over 2MB (so I read somewhere). And thats the case pretty much for all videos – Bernardo Dal Corno Jan 31 '18 at 06:48
I just checked this on Chromium 63.0.3239.132, on a Ubuntu 17.10 64-bit, works just fine on a 4.4 MB video, and with a 25 MB video – Sam Feb 01 '18 at 12:57
Is it possible to preload the beginning part of the video ? – Littlee Sep 28 '19 at 14:44

stackFish · Answer 2 · 2017-07-15T04:49:37.730

Here is a sample to preload full video using XHR . but you need to handle CORS by yourself.

var xhrReq = new XMLHttpRequest();
xhrReq.open('GET', 'yourVideoSrc', true);
xhrReq.responseType = 'blob';

xhrReq.onload = function() {
    if (this.status === 200) {
        var vid = URL.createObjectURL(this.response);
        video.src = vid;
    }
}
xhrReq.onerror = function() {
    console.log('err' ,arguments);
}
xhrReq.onprogress = function(e){
    if(e.lengthComputable) {
        var percentComplete = ((e.loaded/e.total)*100|0) + '%';
        console.log('progress: ', percentComplete);
    }
}
xhrReq.send();

Is it possible to preload an entire HTML5 video source before playing?

2 Answers2