li-coding / Mp4ToBlob

Convert src of HTML video tag to load blob via javascript MediaSource

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PostbirdMp4ToBlob

利用 javascript MediaSource 将 HTML video标签的src转成加载blob

更新记录:

  • 2018.03.23
    • 如果不支持编码或 MediaSource 则自动修改 src 保证视频播放
  • 2018.03.24
    • 去除 autoPlay 参数,改为由用户主动触发 init() 方法(移动端自动播放没有意义)

在线预览:

仓库地址:

使用方法:

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

参数:

PostbirdMp4ToBlob.init() 总共四个参数:

  • selector : 选择器id或class或tagname (内部使用 querySelector 进行选择)
  • url:需要加载的 MP4 视频地址
  • mimeCodec:加载视频的编码格式
  • autoPlay: 是否自动播放 true | false

注意事项:

1、可能的错误

使用中,如果视频无法播放,并且发现如下错误:

Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.

请参考链接:http://www.ptbird.cn/mediadource-readyState-is-not-open.html

2、获取视频的 Codecs 信息

如果要获取视频的 Codecs 信息,请参考链接:http://www.ptbird.cn/mediadource-readyState-is-not-open.html

一般来说直接使用 video/mp4; codecs="avc1.640028, mp4a.40.2" 对 mp4 的视频是没有任何问题的。

About

Convert src of HTML video tag to load blob via javascript MediaSource


Languages

Language:HTML 66.6%Language:JavaScript 33.4%