1. 首頁 > 生活百科 > >

斗魚 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 來軟解播放視頻 。
直播時移對于賽事直播斗魚是支持直播時移的，如下圖所示 。
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
但是這個播放器的進度條體驗不是很好，進度條的高度只有 3px，鼠標非要精準的放上去，才能有 Hover 的效果，這是沒那么容易做到的 。這里推薦個好用開源的播放器進度條 ppbar，你可以把它集成到任何播放器中去 ， 非常的好用 。
斗魚直播時移是基于 HLS 的，如果點擊一下進度條，斗魚播放器會黑一下 ， 將 FLV 切換成 HLS 。
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
在剛開始進入直播間拉流的時候 ， 斗魚播放器可以獲取到服務器返回的一個時間戳，單位是秒，當用戶點擊進度條跳轉到前 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 拉流即可 。
 

推薦閱讀