3

我正在尝试使用 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 甚至都不会完成加载它。经过数小时的搜索人们建议“分块下载文件”并将它们重新组合在一起，然后再将其发送到标签后，我已经看到了两个单独的实例，我什至找到了一个非常有前途的解决方案来处理这个非常精确的设想。但是，对于实施此解决方法，我完全不知所措。如果有人能指出我正确的方向.. 需要什么来实现这个修复或任何东西，我将非常感激。

如果好奇为什么我什至费心使用 XHR 加载视频.. 我想自动播放我的大视频，但 Chrome 总是跳枪并立即开始播放，认为它可以毫无问题地播放整个内容（不可靠“canplaythrough”事件），我似乎无法找到一种方法让 Chrome 在播放之前缓冲整个视频。所以我求助于 XHR，但没有运气。

4

1 回答 1

2

不幸的是，浏览器需要在这种情况下进行大量复制 - 代码看起来确实应该可以工作，因为您正在创建一个 blob URL 而不是超长的 dataURI 字符串。但果然，这种方法很慢。但是，还有另一种解决方案可以为您提供您想要的东西，而不会弄乱 XHR。

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

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

于 2013-10-29T02:39:12.773 回答