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，您可以设置一个成熟的自适应流媒体播放器。