![直播網站實戰開發筆記 Part's 2 - 打造自己的直播播放器](/static/b0b3eb495f6ce087e5ca79e31705f2d5/6b99c/stream.webp)
上一篇,談到用阿里雲來搭建直播伺服器,這篇我要來談前端直播放器,前端直播技術,最常見的有 HLS 、DASH 這兩種直播協定,本篇就主要會以這兩個進行探究
早期的直播協議會讓人想到 Flash(FLV)協議,蘋果公司為了代替 Flash 與 RTMP與,推出了 HLS 直播協定,且為蘋果公司所私有,並在所有蘋果相關的產品中皆能直接使用。
DASH 是 MPEG 公司為了和蘋果公司的 HLS 分庭抗禮,所延申的標準協議,比HLS 延遲更低,並將其開源。
全球因有大量的 iOS 用戶,所以目前仍然有較多的網站傾向採用 HLS 的直播協定,但一些科技巨頭,反而是選擇了開源 DASH 協定。
採用 HLS 公司有:
foxsports、17LIVE、Twitter、球會體育、雷速體育
採用 DASH 公司有:
Netflix、Hulu、YouTube
HTTP Live Streaming,縮寫為HLS,是由蘋果公司提出基於HTTP的串流媒體網路傳輸協定。是蘋果公司QuickTime X和iPhone軟體系統的一部分。它的工作原理是把整個流分成一個個小的基於HTTP的檔案來下載,每次只下載一些。當媒體流正在播放時,客戶端可以選擇從許多不同的備用源中以不同的速率下載同樣的資源,允許串流媒體對談適應不同的資料速率。在開始一個串流媒體對談時,客戶端會下載一個包含元資料的擴充 M3U (m3u8) 播放列表檔案,用於尋找可用的媒體流。 ( 維基 )
先前提到 HTTP Live Streaming 是蘋果所提出,所以在預設瀏覽器 Safari 上,是可以直接播放的, 但 Chrome 等其他瀏覽器是不能播放的。
dailymotion 公司提供了開源套件 Hls.js 的解決跨瀏覽器相容性的問題。
那麼,由前面得知,我們要直接透 HTML VIDEO 播放串流是不可行的,基於用戶端相容性及 Cloud 支援度考量,本篇採用 HLS 協議進行開發。
npm i hls.js --save
在引入 Hls.js 後,我們可以呼叫Hls.isSupported() 判斷瀏覽器是否支援 Hls,如果支援,我們可以,直接使用 video player 直接播放。
mounted() { let videoSrc = "https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine-hls/hls.m3u8" const video = document.getElementById('live-player') this.player = video if (Hls.isSupported()) { const hls = new Hls() hls.loadSource(videoSrc) hls.attachMedia(video) } else { video.src = videoSrc } }
beforeDestroy() { if (Object.keys(this.hls).length > 0) { this.hls.stopLoad() this.hls.destroy() this.hls = null } },
如果是設計手機版的播放器是不能透過 video 去調整音量,而是要透過手機的硬體調整音量,則桌機版可以透過一些 slider 的套件去控制音量。
handleSound(e) { this.player.volume = e / 100 },
許多瀏覽器為了提昇使用者體驗而限制了 autoplay 的條件,如果你要實作 Auto Player。
<video controls muted>
&.floating-video { position: fixed; right: 0; bottom: 240px; z-index: 10; border-radius: 16px 16px ; width: 420px !important; height: 282px !important; animation: popin 0.5s ease-in-out forwards; font-size: 16px @keyframes popin { to { bottom: 240px; } }
document.addEventListener('scroll', function(e) { // 當播放器不是暫停,捲動才作用 if (!that.player.paused && document.scrollTop > videoHeight) { // 當不是浮動的狀態 if (!that.isFloatingVideo) { that.isFloatingVideo = true // 用來控制 class 是不是浮動的樣式 } else { that.isFloatingVideo = false } } })
handleFull() { const ele = this.player if (ele.requestFullscreen) { ele.requestFullscreen() } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen() } else if (ele.webkitRequestFullScreen) { ele.webkitRequestFullScreen() } else if (ele.webkitEnterFullscreen) { ele.webkitEnterFullscreen() } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen() } else if (ele.msRequestFullscreen) { ele.msRequestFullscreen() } },
參考 [Bilibili]的客製化播放器(https://www.bilibili.com/)