Javascript 视频 blob 和渐进式下载

Question

尝试将我的视频流 Web 应用程序从使用带有 URL 的经典<video src="http://myserver/video.mp4">切换到blob，以避免在页面上使用简单的 Ctrl+s 进行完整下载。

使用 XMLHttpRequest 似乎必须允许从远程视频文件创建 blob。

问题是 XMLHttpRequest 下载整个文件，不能用于渐进式下载使用。

以下代码是从远程文件加载 blob 的最简单示例。

var r = new XMLHttpRequest();
r.onload = function() { // Triggered only when all video is downloaded
    video.prop("src", URL.createObjectURL(r.response));
};

r.open("GET", "http://myserver/video.mp4");
r.responseType = "blob";
r.send();

由于该应用程序用于视频流，因此此方法不可用（除非我们希望用户等待 X 分钟才能下载整个文件，这根本不是流式传输）。

有没有办法将 blob 与渐进式下载结合起来？

Answer 1

当只使用 src="foo.mp4" 方法时，渐进式下载应该是浏览器中的默认行为。 但是，播放体验取决于文件的实际格式。

“普通” MP4 文件不是为流式传输而设计的。 它们的结构使得开始播放所需的数据可以在文件的开头和结尾之间拆分。 因此，播放器可能需要缓冲整个内容以获取开始播放所需的数据。

您可以尝试使用MP4Box 之类的工具将普通 MP4 转换为碎片 MP4，指定“-frag”选项。 这会重新排列文件中的数据，以便所有初始化数据都在前面，而文件的其余部分则被分成块。

一个更复杂的选择是使用像 MPEG-DASH 这样的东西。 通过利用 MP4Box 和dash.js ，您可以设置一个完全成熟的自适应流媒体播放器。