一、需求

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

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

毕竟使用的是流。

二、实现

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

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

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

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

在线demo:

可以这么理解:(并不是特别准确)

1、 创建一个 MediaSource 的对象

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

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

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

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

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

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

三、封装

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

github 地址:

调用方式:

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

效果:

TIM截图20180323193709.jpg