MediaSource的使用以及封装MP4转加载Blob的插件
一、需求
在一些视频或者是 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
效果:
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/javascript-mediasource-mpt-to-blob.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!