Force a full preload HTML5 video with Javascript?

Question

I'm about to try to fully preload a video in HTML5. I use the attribute preload=auto but it does not preload the entire video... In Chrome, the video is only preloaded up to 2% and in Safari around 50%...

Is it possible to force a full preload video with javascript?

Answer 1

function addSourceToVideo(element, src, type) {    
    var source = document.createElement('source');    
    source.src = src;    
    source.type = type;    
    element.appendChild(source);    
}

var video;       
$(document).ready(function(){    
    video = document.getElementsByTagName('video')[0];    
    addSourceToVideo( video, "http://your-server.com/clip.ogv", "video/ogv");    
    addSourceToVideo( video, "http://your-server.com/clip.mp4", "video/mp4");    
    video.addEventListener("progress", progressHandler,false);       
});

progressHandler = function(e) {    
    if( video.duration ) {    
        var percent = (video.buffered.end(0)/video.duration) * 100;    
        console.log( percent );    
        if( percent >= 100 ) {    
            console.log("loaded!");    
        }    
        video.currentTime++;    
    }    
}