XMLHttpRequest 分块下载大型 HTML5 视频？答案

【问题标题】：XMLHttpRequest to download large HTML5 video in chunks?XMLHttpRequest 分块下载大型 HTML5 视频？
【发布时间】：2013-10-28 21:25:37
【问题描述】：

我正在尝试使用 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，但没有运气。

【问题讨论】：

标签： javascript xmlhttprequest html5-video buffer blob

【解决方案1】：

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

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

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

【讨论】：

这是一个非常有趣的解决方案。我将尝试按照您的建议进行操作.. 看来这可能是诀窍。
我想我已经遇到了一个障碍：让我们说而不是检查缓冲区（尽管如果我检查缓冲区会是同一类型的情况）让我们听一下“结束”事件，让整个视频缓冲/播放到最后，然后像你建议的那样跳回到开头。一旦它回到开头，取消隐藏，取消静音，然后开始播放，每次有“结束”事件时，它不会一直跳回到开头吗？因此，如果我使用侦听进度事件，而不是“结束”，它不会一直跳回到循环的开头吗？
您可以在完成后删除progress 或ended 侦听器。此外，等待结束会花费不必要的时间。如果您有一个 5 分钟的视频，下载可能需要 20 秒，但您会等待整个 5 分钟。
你让我希望有一次能解决。您可以发送范围请求。我认为 yamdi.exe 也会有所帮助。它在开头设置视频内部标题并打印出关键帧、持续时间等信息。