Javascript视频blob和渐进式下载

Question

尝试将我的视频流式Web应用程序从使用<video src="http://myserver/video.mp4">带URL的经典转换为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，您可以设置一个成熟的自适应流媒体播放器。