有支持M3U8格式的HTML5播放器吗? - 知乎
最近接触了这一块,简单说下吧。
m3u8 是一种基于 HTTP Live Streaming文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持,你可以直接通过
video.src = 'xxx.m3u8'
来实现。
如果你希望兼容所有的浏览器的话, 你需要知道 Chrome 和 Firefox 支持的 Media Source Extensions( 非常不理想,在IE和国内具备兼容模式的极速浏览器下) 的情况:
目前 Youtube 和 Netflix 等主流视频网站,即使 FB 的 newsfeed 里面的视频也采用了 HLS 的解决方案,大致实现流程如下:
其核心,在于对于 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 的播放核心。
https://github.com/jackzhang1204/sewise-player
功能列表:
- 支持HTML5,Flash视频播放技术。
- 支持多平台,PC包括Windows, MacOS, Linux等。Mobile包括Android, IOS, Windows Phone等。
- 支持多浏览器兼容,如IE6/7/8/9/10、Google Chrome、Firefox、safari、Opera等。
- 支持多种视频格式,如mp4、m3u8、oga、webm、theora、flv、f4v等。
- 支持多种协议直播流,如rtmp、hls、http等。
- 支持Flash播放m3u8文件,以及AES-128解码播放。
- 支持PC与Mobile平台播放器自动识别功能。
- 支持浏览器HTML5与Flash特性检测。
- 支持HTML5不同视频格式地址Fallback兼容播放功能。
- 支持Flash Fallback到HTML5视频播放功能。
- 支持播放地址AMF, AJAX, JOSNP类型请求。
- 支持自定义HTML5与Flash皮肤,让您无需了解专业的编码技术也可以制作出超烗风格的皮肤。
- 支持前置广告(swf, 图片, 视频)。
- 支持字幕。
- 支持多种播放参数设定,并支持启动参数设置。
- 支持丰富的api接口,以此可以快速打造功能强大的插件