一、需求

在一些视频或者是 H5 的网页上看到很多 <video> 的 src 实际上是 blob，而是 .mp4。

最近在折腾移动端的 HTML5 的 video ,也想试试使用 blob 是否能够加载的更快一些。

毕竟使用的是流。

二、实现

核心思想当然是使用 MediaSource，这个 API 的地址：

• https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource

MDN 的文档写的很清楚，因此就不在啰嗦文档里面的内容。

MDN 最好的一点是给了一个demo：

• https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html

这个demo完整的展示了如何利用 MediaSource 将 MP4 的src 转成加载 blob 。

在线demo：

• https://nickdesaulniers.github.io/netfix/demo/bufferAll.html

可以这么理解：（并不是特别准确）

1、 创建一个 MediaSource 的对象

2、 借助 URL.createObjectURL 将 MediaSource 构建 blob url

3、监听 MediaSource 的 sourceopen 事件，执行第4-6步

4、请求 url 视频数据并转成 arraybuffer

5、监听 updateend 事件，在请求结束之后 播放视频，结束流传输

6、重复 4-5 直至流加载完位置

具体的可以看上面的示例 html 文件并且自己写写试试。不在重复示例代码中的东西

三、封装

基于已经有的 demo 代码，于是将几个函数封装成一个对象，到时候直接用一行代码调用即可实现这个功能。

github 地址：

• https://github.com/postbird/PostbirdMp4ToBlob

调用方式：

1、引入 js 文件：

<script src="./js/postbird-mp4-to-blob.js"></script>

2、构建基本的 video 容器：

PS: 样式可以不写，src 也可以不赋值

<video id="video" webkit-playsinline="true" controls playsinline="true" type="video/mp4"  x5-video-player-type="h5" ></video>

3、调用对象方法：

    var url = './video/v0-new.mp4';  // url
    var mimeCodec = 'video/mp4; codecs="avc1.640028, mp4a.40.2"'; // 编码格式
    PostbirdMp4ToBlob.init('#video',url,mimeCodec); // 调用 #video 是选择器 id

效果：

• 文章已经结束啦