洞察 video 超能力系列——玩轉 mp4

12 人贊了文章

用技術提升美好事物發生的概率。

Technologically, for greater probability to be happy.

前言

只要在 HTML5 中使用過視頻播放的同學對 video 標籤一定不會陌生，不過很多同學只使用了 video 的基礎功能，實際上 video 擁有強大潛能的，只要姿勢正確就能讓其擁有超能力。不妨從下面幾個場景來逐漸了解下video 未曾被發掘的神秘空間：

• 清晰度無縫切換
• 節省視頻流量

清晰度無縫切換

點播領域裡 mp4 是最普遍、兼容性最好的視頻容器，不過 mp4 也有它的局限性，比如常見的清晰度切換，我們是無法像youtube那樣做到無縫切換的。我們可以看下普通的mp4播放的網路請求和youtube視頻播放的網路請求的區別。

這兩張圖不難看出，在默認情況下 mp4 使用一次 http 請求所有的視頻數據，Youtube 則分次請求。當然這個描述很不專業，但確實形象。造成這種差異的是 video 不支持流式的視頻數據，Youtube 採用的是流式的視頻容器 webm，而 mp4 是非流式的。那如何解釋清楚流式的視頻數據呢，從專業的角度三言兩語很難說清楚，但用大白話翻譯過來就是流式的視頻數據支持分段獨立播放，非流式的不可以。換句話說一個10M的視頻文件，流式的視頻可以把0~1M的數據請求回來單獨播放，但是非流式的不可以。

上面我們描述了視頻格式的不同，接下來我們要說的是第一張圖中的視頻載入是瀏覽器來控制的，通過給 video 的 src 屬性配置視頻地址，觸發播放之後瀏覽器就會開始下載了，JS干涉不了。而 Youtube 的視頻載入是通過JS來控制的，各位可以再次看下第二張圖的網路請求類型：xhr，足以證明這一點。

上面兩點搞清楚之後我們就該說下清晰度切換的事情了。這個需求大家都不陌生，但是直接使用 mp4 格式做無縫清晰度切換，難度還挺大的。先解釋下「無縫清晰度切換」的概念：從播放一個解析度的視頻到另一個解析度且保證畫面、聲音不停頓的平滑切換過程。了解了這個概念，大家應該知道了用 video 無縫切換 mp4 有多難。一方面，video 是不支持流式的視頻格式的，一方面，video 的載入是不受JS控制的。通過切換 video 的 src 屬性，必然會導致畫面中斷、重新請求視頻數據等。有的同學想到說利用兩個 video 再結合 z-index 來搞，但是當你生成另一個video去載入視頻的時候，無法保證兩個畫面是嚴格一致的，即使將原來的畫面暫停到一個時刻，用另一個視頻通過 currentTime 屬性與之同步，切換仍然看到畫面閃爍，基本無法和 Youtube 無縫切換的體驗匹敵。而且還會造成更多流量的浪費，背後的原因大家可以研究下 mp4 容器和 webm 容器的異同，也可以看下視頻解碼相關的文章。

還有一種方法就是將 mp4 格式統統轉碼到流式的視頻格式比如 hls、webm 等。不過這種看上去可行的方式實際上會帶來很大的成本開銷，如將大量視頻做轉碼會消耗高昂的機器資源、雙倍存儲的費用、CDN的雙倍費用等等。其實我們也是在這種背景下研究出來新的技術問題解決清晰度無縫切換的。

首先，我們改變對 mp4 視頻的播放流程，不再直接使用 video 的 src 來播放，因為我們沒有任何可以操作的空間。video不僅支持 src 屬性還支持 Blob 對象，我們就是利用後者。播放的流程如下：

1. 來請求 mp4 視頻數據，這樣可以結合視頻 Range 服務，做到精確載入。
2. 編寫解析器將載入回來的部分 mp4 視頻數據進行解復用
3. 將解復用的視頻數據轉成 fmp4 格式並傳遞給 MediaSource
4. 使用 video 進行解碼完成播放

然後在做清晰度切換的時候流程如下：

1. 播放視頻A，過程同上
2. 在某個時刻，用戶切換到播放視頻B，首先解析B的索引文件（moov），反向計算mp4的range區間
3. 載入B的視頻區間數據
4. 解復用
5. 把數據轉換成fmp4格式並傳遞給MediaSource
6. 刪除A的部分Buffer
7. 在下一個關鍵幀自動完成畫質的切換

這個過程看上去比較繁瑣，但是所有的操作都是在瀏覽器端完成，也就是說都是JS來實現的。這樣之前說的所有成本問題都不存在，還能做到youtube相同體驗的無縫切換。如果大家也想使用這個功能不需要自己再去實現一遍上述流程，可以使用如下代碼：

如果對這段代碼有什麼疑惑，或者想深入了解下它背後是如何實現的，可以參考