Javascript视频blob和渐进式下载

尝试使用经典< video src =“http：//myserver/video.mp4”>切换我的视频流式网络应用程序使用blob的URL来避免在页面上的简单Ctrl上完全下载.

似乎必须使用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与渐进式下载结合起来？

解决方法

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

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

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

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