Web視頻播放一桿到底
前言
毫無(wú)疑問(wèn)，現(xiàn)在是短視頻、直播的時(shí)代。視頻內(nèi)容逐漸代替圖文形式成為網(wǎng)友們獲取新鮮事物以及展現(xiàn)自我的一大媒介。隨著5G的到來(lái)，2020年屬于直播短視頻爆發(fā)式增長(zhǎng)的一年，電商平臺(tái)也都涌入直播營(yíng)銷的大風(fēng)口，成為了各自平臺(tái)引流轉(zhuǎn)化的關(guān)鍵。不管是用戶還是開(kāi)發(fā)者，我們處于這個(gè)風(fēng)口中。本文將帶你探索瀏覽器視頻播放的奧秘。
視頻的構(gòu)成
一個(gè)完整可播放的視頻文件是由視頻和音頻兩部分構(gòu)成。視頻和音頻又有各自的封裝格式(容器)和編碼格式。
編碼格式
常見(jiàn)的視頻編碼格式有：MPEG4、H.264、H.265等。
常見(jiàn)的音頻編碼格式有：MP3、AAC、WAV等。
封裝格式
常見(jiàn)的視頻封裝格式有：MP4、FLV、mov、AVI、RMVB等。
先理解幾個(gè)名詞
幀
就是影像動(dòng)畫中的最小單位的影像畫面。一幀就是一張靜止的圖像。視頻中的動(dòng)畫就是由多幅連續(xù)的幀畫面構(gòu)成。
幀率
幀率是以幀為單位的圖像在顯示器上出現(xiàn)的頻率，也叫幀速率，單位：赫茲(Hz)。簡(jiǎn)單理解為每秒播放圖片的數(shù)量。
碼率
碼率是比特率的俗稱，是指每秒傳送的比特?cái)?shù)。
FFmpeg
FFmpeg是可以用來(lái)記錄、轉(zhuǎn)換數(shù)字視頻和音頻的一套計(jì)算機(jī)程序。FFmpeg是在linux下開(kāi)發(fā)，所以天生跨平臺(tái)。它對(duì)音視頻編碼格式的支持比較全面，能對(duì)視頻的各個(gè)組成部分進(jìn)行編碼。
H264
通常被稱之為H.264/AVC;是由國(guó)際標(biāo)準(zhǔn)化阻止和國(guó)際電信聯(lián)盟共同提出的繼MPEG4之后的新一代數(shù)字視頻壓縮格式。采用H.264壓縮后的數(shù)據(jù)具有低碼率、高質(zhì)量圖像、容錯(cuò)能力強(qiáng)、網(wǎng)絡(luò)適應(yīng)性強(qiáng)等優(yōu)點(diǎn)。
MP4
MP4是一中標(biāo)準(zhǔn)的數(shù)字多媒體容器格式;用于音頻、視頻的壓縮編碼，也可以存儲(chǔ)字幕和靜止圖像，同時(shí)能以流的方式進(jìn)行網(wǎng)絡(luò)傳輸。
fMP4(Fragmented MP4)
fMP4是基于MPEG-4 Part 12的流媒體格式，與MP4很相似。簡(jiǎn)單來(lái)說(shuō)fMP4區(qū)別與MP4區(qū)別就是它能很好地適應(yīng)流式播放。
瀏覽器播放視頻
video標(biāo)簽播放
在瀏覽器播放視頻，可以使用HTML5原生的video標(biāo)簽。但其播放的格式使用一定限制的，目前video只支持三種格式WebM、Ogg、MP4。
- WebM：WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
- Ogg ：Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器
- MP4：MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
上面三種可以直接使用video播放：
- <video id="video-box"
- src="//cloud.video.taobao.com/play/u/755731755/p/1/e/6/t/1/283631891407.mp4" controls
- width="400px" heigt="400px"></video>
在頁(yè)面初始化完成后，video標(biāo)簽會(huì)將整個(gè)mp4文件下載到瀏覽器，完成后即可播放。但是當(dāng)mp4文件較大時(shí)，緩存時(shí)間就比較長(zhǎng)，播放體驗(yàn)不好。當(dāng)然也可以使用video.js 來(lái)播放，這里就不贅述了。
播放HLS流
HLS(HTTP Live Streaming)是一個(gè)由Apple公司提出的基于HTTP的流媒體傳輸協(xié)議。視頻的封裝格式是TS，編碼格式是H.264/ACC，除了定義TS視頻文件本身，還定義了用來(lái)控制播放的m3u8文本文件。移動(dòng)端大部分瀏覽器都支持，也就是說(shuō)，你可以在移動(dòng)端瀏覽器直接使用vedio標(biāo)簽直接加載一個(gè)m3u8文件播放視頻或者直播。但在PC端只支持蘋果的safari瀏覽器，其他瀏覽器想播放需要引入第三方庫(kù)，如：hls.js：
- <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
- <video id="video"></video>
- <script>
- var video = document.getElementById('video');
- var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
- if (Hls.isSupported()) {
- var hls = new Hls();
- hls.loadSource(videoSrc);
- hls.attachMedia(video);
- hls.on(Hls.Events.MANIFEST_PARSED, function() {
- video.play();
- });
- }
- </script>
播放HLS流的邏輯很簡(jiǎn)單，首先根據(jù)提供的m3u8地址源通過(guò)HTTP請(qǐng)求獲取到一級(jí)index文件內(nèi)容如：
- #EXTM3U
- #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=64000
- 500kbps.m3u8
- #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=774000
- 1000kbps.m3u8
- #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=887000
- 500kbps.m3u8
- #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=7692000
- 1000kbps.m3u8
bandwidth 指定視頻流的碼率，每一個(gè) #EXT-X-STEAM-INF 的下一行是二級(jí)index文件的路徑，可以是相對(duì)路徑或者是絕對(duì)路徑。請(qǐng)求到的二級(jí)文件內(nèi)容如：
- #EXTM3U
- #EXT-X-PLAYLIST-TYPE:VOD
- #EXT-X-TARGETDURATION:10
- #EXTINF:10,
- 1000kbps-00001.ts
- #EXTINF:10,
- 1000kbps-00002.ts
- #EXTINF:10,
- 1000kbps-00003.ts
- #EXTINF:10,
- 1000kbps-00004.ts
- #EXTINF:10,
- ... ...
- #EXT-X-ENDLIST
可以從二級(jí)文件中讀取到ts文件的路徑，同樣可以是相對(duì)路徑或者絕對(duì)路徑。 #EXTINF 表示每個(gè)ts切片的時(shí)長(zhǎng)。 #EXT-X-ENDLIST 是視頻結(jié)束標(biāo)志，如果有這個(gè)標(biāo)志也表明該流不是一個(gè)直播流。
HLS播放的優(yōu)勢(shì)：
- 可以使用http協(xié)議請(qǐng)求數(shù)據(jù)流
- 可以切換不同的碼率，實(shí)現(xiàn)無(wú)縫播放
劣勢(shì)：
- 延遲較高，實(shí)時(shí)性差，一般延遲在10s以上，不適合做直播
- ts文件切片小且多，對(duì)存儲(chǔ)和緩存都有一定的要求
播放FLV流
FLV(Flash Video)是一種網(wǎng)絡(luò)視頻格式，F(xiàn)LV只能基于flash播放，但是由于flash存在很多安全問(wèn)題已經(jīng)被眾多廠商拋棄，現(xiàn)在我們?nèi)绻贖5中播放flv格式的視頻流可以使用Blibli的開(kāi)源庫(kù)：Flv.js，flv.js原理是解析視頻的flv流并實(shí)時(shí)轉(zhuǎn)換為fmp4格式，再通過(guò) Media Source Extension 喂給瀏覽器的 video 標(biāo)簽。
- <script src="flv.min.js"></script>
- <video id="videoElement"></video>
- <script>
- if (flvjs.isSupported()) {
- var videoElement = document.getElementById('videoElement');
- var flvPlayer = flvjs.createPlayer({
- type: 'flv',
- url: 'http://example.com/flv/video.flv'
- });
- flvPlayer.attachMediaElement(videoElement);
- flvPlayer.load();
- flvPlayer.play();
- }
- </script>
基于Media Source Extensions播放視頻流
我們經(jīng)常在很多直播網(wǎng)站去看視頻，你有沒(méi)有注意到他們是用的什么流?我們?nèi)站隨便找一個(gè)直播或者視頻打開(kāi)控制臺(tái)查看播放器，你會(huì)發(fā)現(xiàn) video 標(biāo)簽的 src 居然是 blob 開(kāi)頭的一個(gè) url 。在前面講FLV播放時(shí)，我們提到了Media Source Extension ，本節(jié)將介紹這種基于MSE的直播方案。
Media Source Extensions 是什么
媒體源擴(kuò)展(Media Source Extensions，縮寫MSE)是一項(xiàng)W3C規(guī)范，MSE允許Javascript為audio標(biāo)簽和video標(biāo)簽動(dòng)態(tài)地構(gòu)造媒體源。
借助MSE的能力，我們可以將接收到的實(shí)時(shí)流通過(guò) blob url 往video標(biāo)簽中灌入二進(jìn)制數(shù)據(jù)(如fmp4格式流)，或者使用 canvas 來(lái)實(shí)現(xiàn)直播。
簡(jiǎn)單實(shí)現(xiàn)
首先，判斷瀏覽器是否支持MediaSource：
- const supportMediaSource = window.MediaSource &&
- typeof window.MediaSource.isTypeSupported === 'function' &&
- window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"');
MediaSource支持情況：
接下來(lái)新建 MediaSource 實(shí)例，并使用生成blob url 加到video標(biāo)簽。并且監(jiān)聽(tīng) sourceOpen 事件來(lái)判斷初始化完成。
- const mediaSource = new MediaSource();
- const video = document.querySelector('#video-box');
- video.src = URL.createObjectURL(mediaSource);
- mediaSource.addEventListener('sourceopen',function(){
- // TODO
- })
接下來(lái)我們通過(guò)websocket獲取原始視頻流，處理后通過(guò) SourceBuffer 喂給 mediaSource
- const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
- const ws = new WebSocket("wss://xxx.websocket.com");
- ws.onopen = function(evt) {
- console.log("Connection open ...");
- ws.send("fetch Data");
- };
- ws.onmessage = function(evt) {
- // 可以在灌入數(shù)據(jù)前進(jìn)行轉(zhuǎn)碼等操作
- sourceBuffer.appendBuffer(evt.data);
- };
- ws.onclose = function(evt) {
- console.log("Connection closed.");
- };
通過(guò)MSE的方式我們可以將接收到的視頻或者音頻流進(jìn)行端處理，配合WebWorker技術(shù)實(shí)現(xiàn)快速轉(zhuǎn)碼、支持多播，給我們想象空間。
H.265視頻播放
H.265是ITU-T VCEG繼H.264之后所制定的新的視頻編碼標(biāo)準(zhǔn)。H.265標(biāo)準(zhǔn)圍繞著現(xiàn)有的視頻編碼標(biāo)準(zhǔn)H.264，保留原來(lái)的某些技術(shù)，同時(shí)對(duì)一些相關(guān)的技術(shù)加以改進(jìn)。新技術(shù)使用先進(jìn)的技術(shù)用以改善碼流、編碼質(zhì)量、延時(shí)和算法復(fù)雜度之間的關(guān)系，達(dá)到設(shè)置。
但是由于瀏覽器不支持H265格式的流，所以我們無(wú)法直接播放。這時(shí)候可以使用MSE的方式在 sourceBuffer.appendBuffer(evt.data) 前將 evt.data 使用 libde265.js 等轉(zhuǎn)碼庫(kù)轉(zhuǎn)碼后給到sourceBuffer?；蛘呤褂脴I(yè)界成熟的播放器進(jìn)行播放，如淘系的@ali/videox播放器。
總結(jié)
越來(lái)越多的廠商更加偏向于H.265的編碼格式，但是瀏覽器對(duì)該格式的支持度不友好的前提下我們不得不進(jìn)行轉(zhuǎn)碼。使用MSE方式在瀏覽器端轉(zhuǎn)碼，則能借助GPU提高效率和降低延遲。但還是無(wú)法兼容所有的PC或者移動(dòng)端瀏覽器，這條路還需要我們?nèi)ダ^續(xù)探索。5G給互聯(lián)網(wǎng)帶來(lái)的福利不僅僅是在視頻、直播的爆發(fā)，我相信web端圖像視頻技術(shù)也將突破現(xiàn)有的技術(shù)瓶頸，WebAssembly、硬件編碼等圖像渲染技術(shù)也將越來(lái)越豐富。
參考
https://baike.baidu.com/item/ffmpeg
https://github.com/Bilibili/flv.js/
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource
原文鏈接：https://segmentfault.com/a/1190000038766516
