CODEWITHSUNDEEP
google-chromehtml5-videopreload
Romain André
Romain André

Reputation: 171

Force a full preload HTML5 video with Javascript?

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?

Upvotes: 17

Views: 13940

Answers (2)

Syed Hasnain Mehadi
Syed Hasnain Mehadi

Reputation: 31

<video preload>
<source src="videoURL" type="video/mp4"/>
</video>

Upvotes: 2

Varun Chakervarti
Varun Chakervarti

Reputation: 1042

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++;    
    }    
}

Upvotes: 11

Related Questions