Question

我正在尝试使用XMLHttpRequest将大型视频加载到标记中。我使用以下代码成功地使用了小视频文件：

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest();
xhr.open('GET', 'quicktest.mp4', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var video = document.createElement('video');
video.src = window.URL.createObjectURL(this.response);
video.autoplay = true;
document.body.appendChild(video);
};
xhr.send();

如果视频很小，没问题。但是，我的文件非常大并且会产生内存不足错误，从而导致Chrome崩溃。 Firefox也不会完成加载它。我已经看到两个单独的实例，经过几个小时的搜索后，人们建议“以块的形式下载文件”并将它们重新组合在一起然后再发送到标签，我甚至找到了一个非常promising solution处理的文件。这个非常精确的场景。但是，我完全失去了实施此解决方法的方法。如果有人可以指出我正确的方向..需要什么来实现这个修复，或任何事情，我会非常感激。

如果好奇为什么我甚至不愿意使用XHR来加载视频..我想要自动播放我的大视频，但Chrome总是跳起来并立即开始播放，认为它可以播放整个视频问题（不可靠的“canplaythrough”事件）我似乎找不到让Chrome在播放前缓冲整个视频的方法。所以我正在使用XHR，但没有运气。

Answer 1

不幸的是，浏览器需要在这种情况下进行如此多的复制 - 代码似乎应该可以正常工作，因为您创建了一个blob URL而不是一个超长的dataURI字符串。但果然，这种方法非常慢。但是，还有另一种解决方案，可以在不弄乱XHR的情况下为您提供所需的解决方案。

创建一个视频元素并将src设置为mp4（或webm for firefox）文件。为“progress”事件添加一个侦听器，该事件应在浏览器下载文件时定期触发。在该监听器中，您可以查看buffered属性以查看已下载了多少视频，并自行决定是否已准备好开始播放。

现在，这里有点难看。即使使用预加载，浏览器仍然只会缓冲视频的一小部分，可能与触发canplaythrough所需的数量相同。你只会得到一两个进展事件，然后什么都没有。因此，在创建视频元素时，将其设置为autoplay，然后将其隐藏并静音。这应该会强制浏览器下载其余视频并触发更多progress个事件。当它完全缓冲或足以满足您时，请将currentTime设置为零，取消静音并取消隐藏。

XMLHttpRequest以块的形式下载大型HTML5视频？

1 个答案: