斗鱼 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？( 二 ) _生活百科

不像 Flash ， H5 的 video 元素是无法播放 FLV 视频的，我们需要借助 MSE 来自己控制视频播放，具体原理是将 FLV 转封装成 FMP4 视频格式，然后交给 MSE 播放即可。

MSE 全称是 Media Source Extensions API，它是 Web 流媒体的基础，所有 Web 流媒体平台最终都会用到它，如果对它感兴趣，欢迎查看流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4

目前有开源的 flv.js 来帮我们完成这件事，查看斗鱼 dist 后代码，斗鱼也是使用的 flv.js ，不过在之上加了很多自定义的代码，例如加上了 h265 编码的支持， flv.js 是不支持 h265 编码的，FLV 官方规范也不支持，但是业务又有这种需求，所以一般将 FLV 视频编码 ID 等于 12 当作 h265 的流。在斗鱼直播中如果发现直播流是 h265 编码并且浏览器不支持 h265，斗鱼会利用 WASM 来软解播放视频。
直播时移对于赛事直播斗鱼是支持直播时移的，如下图所示。

文章插图
但是这个播放器的进度条体验不是很好，进度条的高度只有 3px，鼠标非要精准的放上去，才能有 Hover 的效果，这是没那么容易做到的。这里推荐个好用开源的播放器进度条 ppbar，你可以把它集成到任何播放器中去，非常的好用。
斗鱼直播时移是基于 HLS 的，如果点击一下进度条，斗鱼播放器会黑一下，将 FLV 切换成 HLS 。

文章插图
在刚开始进入直播间拉流的时候，斗鱼播放器可以获取到服务器返回的一个时间戳，单位是秒，当用户点击进度条跳转到前 10 分钟时，就直接用当前时间减去 600 秒就得到了前 10 分钟视频的时间戳，然后会用这个时间戳去请求请求一个 getVodStream 接口获取到 HLS 时移流地址，获取到 HLS 过后，就和普通 HLS 直播一样去播放即可。
和 FLV 一样，要在浏览器中播放 HLS 流，同样需要 MSE API 来播放，目前可以借助开源的 hls.js 来在浏览器中播放 HLS 流。查看斗鱼 dist 过后的代码，斗鱼应该没有使用 hls.js，而是自己实现在浏览器中播放 HLS 。
总结这篇文章介绍了斗鱼 H5 直播技术的原理，斗鱼不仅使用国内常用的 HTTP-FLV 方案，还加入了 P2P 拉流，从而节省 CDN 流量。对于赛事直播，斗鱼还支持直播时移，直播时移是使用 HLS 来实现的，用户在 seek 后会通过 seek 到的时间点去服务器换取对应的时移 HLS 流地址，然后走 HLS 拉流即可。