我正在尝试使用 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，但没有运气。
最佳答案
不幸的是，浏览器需要在这种情况下进行如此多的复制 - 代码看起来应该可以工作，因为您正在创建一个 blob URL 而不是一个超长的 dataURI 字符串。但是果然，这个方法很慢。然而，还有另一种解决方案应该可以满足您的需求，而不会影响 XHR。
创建一个视频元素并将 src 设置为您的 mp4(或 webm for firefox)文件。为“进度”事件添加一个监听器，该事件应在浏览器下载文件时定期触发。在该监听器中，您可以检查 buffered 属性以查看已下载了多少视频，并自行决定是否准备好开始播放。
现在，它变得有点丑陋了。即使有预加载，浏览器仍然只会缓冲一小部分视频，可能与触发 canplaythrough 所需的缓冲量大致相同。您只会收到一两个进度事件，然后什么也没有。因此，当您创建视频元素时，将其设置为 autoplay，然后将其隐藏并静音。这应该会强制浏览器下载视频的其余部分并触发更多的 progress 事件。当它完全缓冲或足以让您满意时，将 currentTime 设置回零，取消静音和取消隐藏。
关于javascript - XMLHttpRequest 分块下载大型 HTML5 视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19645363/