10月20日,北京【人工智能】源创会火热报名中,点击报名收获 AI 训练指南
Watch Star Fork

postbird / PostbirdMp4ToBlobHTML

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
利用 javascript MediaSource 将 HTML video标签的src转成加载blob
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
readme.md 2.20 KB

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 的视频是没有任何问题的。

项目点评 ( 0 )

你可以在登录后,发表评论

搜索帮助