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

Question

我准备在HTML5中尝试完全预加载视频。 我使用属性preload = auto，但它不会完全预加载视频... 在Chrome中，视频仅预加载了2％左右，在Safari中则预加载了约50％...

是否可能使用JavaScript强制完全预加载视频？

- Romain André

---

同样的问题在这里：我需要在Chrome中预加载完整的视频。不幸的是，我还没有找到解决方案，我也尝试过使用XMLHttpRequest方法，但是出现了不允许的错误...我希望有一个解决方案... - user3602937

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

- Varun Chakervarti

---

这是一个很好的解决方案。对于后台加载，只需在视频标签上调用createElement即可。此外，Chin-Chan加一！ - deepelement

bindKeys函数是做什么的？还是说这只是从复制粘贴中留下来的东西？我现在注意到了index变量。 - DBS

@DBS 是的，这是复制粘贴留下来的，已更新回答。谢谢！！ - Varun Chakervarti

这在Chrome中对我不起作用（在大约60％左右停止触发“progress”事件）。但是如果我执行video.currentTime+=2，它似乎可以可靠地工作，奇怪的是。 - Marius

在进行更彻底的测试后，我发现这并不是很可靠的解决方案。这个解决方案在Chrome中可以可靠地工作：https://dev59.com/Ymkw5IYBdhLWcg3w1eC7#23299806 -- 完整电影下载并作为blob加载到“src”中。 - Marius

感谢您的解决方案！它在Web浏览器上运行良好，除了在IE10（Win 7）上出现了一个问题。如果我第一次访问视频页面（没有缓存），它就像必须一样工作，但是当我重新加载时，它不起作用，“百分比”不会在控制台中记录。 - MakeLoveNotWar

Answer 2

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

- Syed Hasnain Mehadi

---

问题：浏览器如何从 preload=auto 不同地解释它？ - Jan