如何快速生成视频Blob URL 解决长MP4加载生成延迟问题

我尝试生成类似YouTube所用的Blob URL，下方代码虽可正常运行，但为1小时时长的MP4文件生成Blob URL时至少存在16秒延迟。请问是否有方法可以实现类似YouTube那样快速生成Blob URL、加载速度更快的效果？我刚接触Blob相关技术，对此存在不少困惑，感谢解答。

原有实现代码：

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.onloadend = function () {
  console.log('Start Player');
  var blob = new Blob([xhr.response]);
  var blobUrl = URL.createObjectURL(blob);
  document.getElementById("video").src = blobUrl;
};

xhr.onloadstart = function () {
  console.log('Start loading');
};

xhr.open("GET", "/video.mp4", 1);
xhr.send(null);

你这代码延迟高的根本原因是实现逻辑和YouTube的Blob URL机制从根上就不一样：

• 当前代码会等待整个MP4文件完整下载到浏览器内存后，才会创建Blob、生成Blob URL赋值给播放器。1小时时长的MP4体积通常在数百MB到数GB级别，完整下载的耗时就是你遇到的16秒甚至更长等待的来源，同时全量加载大文件会占用极高的内存，很容易造成标签页卡顿、崩溃。
• YouTube的Blob URL从来不是基于完整下载的大文件生成的，你看到的Blob URL只是一个本地引用标记，指向浏览器内创建的流媒体数据源，视频数据是按需分段加载的，不需要等全量文件下载完成就能开始播放，自然加载速度极快。

根据实际需求选对应方案即可，都能实现秒开效果：

• 无特殊需求优先选最简方案：不用手动创建Blob URL，直接把视频地址赋值给video标签的src属性。只要服务端支持HTTP Range请求，浏览器会自动按需拉取数据：先加载视频元数据，再加载当前播放位置附近的片段，打开即可播放，拖动进度条时也会自动加载对应位置的内容，加载速度和主流视频站没有区别。
• 如果有鉴权、内容加密、防盗链等特殊需求必须使用Blob类播放逻辑，使用MediaSource Extensions（MSE）实现流式加载：
  1. 先创建MediaSource实例，同步调用URL.createObjectURL(mediaSource)生成Blob URL，直接赋值给video标签的src属性，这一步几乎无耗时
  2. 提前把原视频转成碎片化MP4（fMP4）格式，切为数秒一个的小体积分片
  3. 监听MediaSource的对应事件，仅在需要时拉取当前播放位置附近的分片，追加到SourceBuffer中即可，不需要等所有分片下载完成就能启动播放

不要尝试优化一次性拉取全量文件的逻辑，实现思路从根源上就存在问题，无论怎么调整参数都无法解决大文件场景下的加载延迟问题。

内容的提问来源于stack exchange，提问作者Chris