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

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

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