使用Javascript强制完整预加载HTML5视频？ [英] Force a full preload HTML5 video with Javascript?

问题描述

我即将尝试在HTML5中预载视频。我使用属性 preload = auto ，但它不会预载整个视频...在Chrome中，视频只有2％预加载。在Safari中，加减50％...
我的问题是：我们可以用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 2% preload. In Safari, plus or minus 50% ... My question is: "Can we force a full preload video with javascript?" Thank you for your help!

推荐答案

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

这篇关于使用Javascript强制完整预加载HTML5视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！