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

Question

解决方案

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

在这里可用。

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

问题

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

但是，我想确保整个视频都提前加载，因为它是定时练习中的一个元素，如果在练习过程中互联网连接断开，我将不得不检测到此类事件并重新开始练习。

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

我尝试使用 XMLHttpRequest 将整个视频源加载为 arraybuffer，然后将其转换为 blob 并设置为 [=17] 的 src =] 元素在我的 <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();

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

Is it possible to preload an entire HTML5 video source before playing?

html

javascript

video

jquery

preload