有支持M3U8格式的HTML5播放器

作者:蒲小花
链接:https://www.zhihu.com/question/21087379/answer/252216119
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

最近接触了这一块,简单说下吧。

m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持,你可以直接通过

video.src = 'xxx.m3u8'

来实现。

如果你希望兼容所有的浏览器的话, 你需要知道 Chrome 和 Firefox 支持的 Media Source Extensions( 非常不理想,在IE和国内具备兼容模式的极速浏览器下) 的情况:

 

v2-6d4ec90a1b0c5309bb9498693d84d85e_hd.jpg

目前 Youtube 和 Netflix 等主流视频网站,即使 FB 的 newsfeed 里面的视频也采用了 HLS 的解决方案,大致实现流程如下:

 

v2-e4a1887049d7e3f0f102f30bd7fff9d3_hd.jpg

其核心,在于对于 m3u8 的文件解析和 通过 XHR 去完成对分片内容二进制文件的获取,然后使用 MSE 的 appendBuffer 去进行 buffer 的封装,然后自己完成合流的工作。

 

目前国内的,bilibili 最早实现了基于 MSE 解决方案的播放器,大概为什么他们必须用 MSE 而不是 优酷 和 腾讯 的 多 video 方案,可能是钱少,视频转MP4需要大量服务器,当然 MSE 这是技术的趋势。

 

前面废话太多直接上推荐吧:

 

优先推荐 video.js 的方案,因为它支持多个播放核心,而且插件非常多,你只需要使用

videojs/videojs-contrib-hls 就可以了。

再安利一个非常纯粹的方案,就是 hls.js 它需要你手进行 video 的绑定。

75 Team 也开源 的一个播放器:Chimeejs/chimee

 

当然我们 team 也会开源一款类似 youtube 的播放核心。

 

有,
safari的h5原生支持hls(m3u8)播放
chrome等浏览器需要自己写解码,参考这个videojs/videojs-contrib-hls · GitHub
也就是说HTML5 Video Player 安装videojs-contrib-hls插件就可以了



作者:知乎用户
链接:https://www.zhihu.com/question/21087379/answer/41506906
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

转载于:https://my.oschina.net/yizhichao/blog/1618506

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值