强制使用 Javascript 完全预加载 HTML5 视频？

Question

我即将尝试完全预加载 HTML5 中的视频。我使用属性preload=auto，但它不会预加载整个视频...在 Chrome 中，视频仅预加载了 2%，而在 Safari 中则为 50%...

是否可以使用 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++;    
    }    
}