播放之前是否可以预加载整个HTML5视频源？

Joshua Barnett 发表于 Dev

约书亚·巴内特（Joshua Barnett）

解

我创建了一个接受的答案的工作示例，该示例使用XHR并通过栏报告加载进度。

在这里可用。

https://github.com/synthecypher/full-preload

题

我注意到，当我创建<video>带有源的元素并调用load()它时，它将加载到大约36％的位置，然后除非您停止play()播放，否则它将停止，这时它将继续在播放视频时加载其余部分。

但是，我想确保事先将整个视频载入，因为这是定时练习中的一个要素，如果在练习期间互联网连接断开，我将必须检测到此类事件并重新开始练习。

我认为这是HTML5媒体元素的内置功能，但是可以覆盖此本机功能吗？

我已经尝试加载整个视频源作为arraybuffer使用XMLHttpRequest，然后将其转换为一个blob和设置为src一个的<source>我的元素<video>的元素。

但这确实有效，但是由于我无法通过进度条向用户报告下载进度，因此并不理想，因为XHR是一项同步操作，并且会导致我的JavaScript挂起，直到收到响应为止。我知道XHR2现在具有这种功能，但是我必须支持IE8 +，所以这不是一个选择。

有没有更简单，更优雅的解决方案来解决我的问题，它将报告进度？

要求

播放前需要预加载整个<video>元素<source>。
需要报告进度

山姆

如果有源，则可以将数据预下载到JavaScript中的Blob中，并在准备好后播放。

如果视频在您的服务器上，则下面的方法应该起作用。如果没有，您将遇到CORS问题。

var video = document.getElementById("Your video element id")

var url = "Some video url"

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";

xhr.onload = function(oEvent) {

    var blob = new Blob([oEvent.target.response], {type: "video/yourvideosmimmetype"});

    video.src = URL.createObjectURL(blob);

    //video.play()  if you want it to play on load
};

xhr.onprogress = function(oEvent) {

    if (oEvent.lengthComputable) {
        var percentComplete = oEvent.loaded/oEvent.total;
        // do something with this
    }
}

xhr.send();

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。