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

Question

解

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

它可以在这里找到。

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

题

我注意到当我用源创建一个<video>元素并调用load()它将加载到大约36％然后停止除非你play()它，此时它将继续加载视频的其余部分播放。

但是，我想确保整个视频在手动加载，因为它是定时练习中的元素，如果在练习期间互联网连接中断，我将不得不检测到这样的事件并重新开始练习。

我假设这是HTML5媒体元素的内置功能，但它是否可以覆盖此本机功能？

我试图使用arraybuffer将整个视频源加载为XMLHttpRequest，然后将其转换为blob并设置为src元素中<source>元素的<video>。

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

是否有一个更简单，更优雅的解决方案来解决我的问题？

要求

• 在玩之前需要预加载整个<video>元素的<source>。
• 需要报告进度

Answer 1

如果您有源代码，则可以预先将数据预先下载到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();

Answer 2

以下是使用XHR预加载完整视频的示例。但你需要自己处理CORS。

var xhrReq = new XMLHttpRequest();
xhrReq.open('GET', 'yourVideoSrc', true);
xhrReq.responseType = 'blob';

xhrReq.onload = function() {
    if (this.status === 200) {
        var vid = URL.createObjectURL(this.response);
        video.src = vid;
    }
}
xhrReq.onerror = function() {
    console.log('err' ,arguments);
}
xhrReq.onprogress = function(e){
    if(e.lengthComputable) {
        var percentComplete = ((e.loaded/e.total)*100|0) + '%';
        console.log('progress: ', percentComplete);
    }
}
xhrReq.send();