Javascript视频blob和渐进式下载

时间:2013-10-30 09:47:18

标签: javascript video html5-video blob

尝试将我的视频流式网络应用程序从使用带有URL的经典<video src="http://myserver/video.mp4">切换为 blobs ,以避免在页面上的简单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与渐进式下载结合起来?

1 个答案:

答案 0 :(得分:0)

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

“正常”MP4文件不是为流媒体设计的。它们的结构使得开始播放所需的数据可以在文件的开头和结尾之间分开。因此,玩家可能需要缓冲整个事物以获得开始播放所需的数据。

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

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