[譯] 優化 MP4 視訊以獲得更快的流傳輸速度

鄭昊川發表於2019-03-04
優化

優化 MP4 視訊以獲得更快的流傳輸速度

隨著 Flash 的衰落 和 移動裝置的爆炸式增長，越來越多的內容正在以 HTML5 視訊的方式釋出。你可以通過 用 HTML5 視訊片段代替 GIF 動畫 的方式來優化你的網站速度。然而，視訊檔案本身就有大量可優化的地方，你可以藉此提升它們的效能。

其中最重要的一點是視訊檔案必須經過適當優化才能作為 HTML5 視訊線上播放。如果沒有這種優化，視訊可能會延遲數百毫秒，而只是試圖播放視訊的訪問者也可能會浪費兆位元組的頻寬。在這篇文章中，我將向你展示如何優化視訊檔案以獲得更快的流傳輸速度。

MP4 流媒體是如何工作的

在我們 上一篇文章 的討論中，HTML5 視訊是一種跨瀏覽器觀看視訊的方式，不需要類似 Flash 的外掛。截止到 2016 年，儲存在 MP4 容器檔案中的 H.264 編碼視訊（下文將簡稱為 MP4 視訊）已成為所有線上 HTML5 視訊的標準格式。所以當我們討論如何優化 HTML5 視訊，其實我們是在討論如何優化 MP4 視訊以獲取更快的播放。而我們優化的方式與 MP4 檔案的結構以及流媒體傳輸的工作原理息息相關。

MP4 檔案由叫做 原子 的資料塊組成。這些原子用以儲存字幕和章節等內容， 當然也包括視訊和音訊等顯而易見的資料。而視訊和音訊原子的後設資料，以及有關如何播放視訊的資訊，如尺寸和每秒的幀數，則儲存在叫做 moov 的特殊原子中。你可以認為 moov 原子是某種意義上的 MP4 檔案目錄。

當你播放視訊時，程式會查詢 MP4 檔案，定位 moov 原子的位置，然後藉此去查詢視訊和音訊的起始位置來開始播放。遺憾的是，原子可能以任意順序排列，所以程式一開始並不知道 moov 原子在哪裡。如果你已經擁有整個視訊檔案，查詢 moov 原子是完全沒問題的。但如果暫時沒有整個檔案，比如流傳輸 HTML5 視訊時，就需要另闢蹊徑了。這才是流媒體的重點！你無需先下載整個視訊即可開始觀看。

當流傳輸時，你的瀏覽器請求視訊資源並開始接收檔案的開始部分。程式查詢 moov 原子是否在開始的部分。如果 moov 原子不在開始位置，它必須下載整個檔案才能嘗試找到 moov，或者瀏覽器可以從最末端的資料開始下載視訊檔案的不同小片段，以試圖找到 moov原子。

所有這些試圖找到 moov 的行為浪費了時間和頻寬。遺憾的是，在找到 moov 之前，視訊是無法播放的。 我們可以在下面的螢幕截圖中看到瀏覽器的瀑布圖，該瀏覽器試圖使用 HTML5 視訊來流傳輸未優化的 MP4 檔案：

mp4-no-moov

你可以看到瀏覽器在播放視訊之前發起了三次請求。 在第一次請求中，瀏覽器通過 HTTP range request 下載了 552 KB 的第一部分視訊。 我們可以通過 HTTP 狀態碼 206 Partial Content 以及檢視響應頭的詳細資訊來發現這些。然而，moov 原子並未包含在內，所以瀏覽器無法開始視訊播放。接下來，瀏覽器通過 HTTP range request 獲取了後面的 21 KB 視訊檔案。它包含 moov 原子，告訴瀏覽器視訊和音訊流的開始位置。最後，瀏覽器發起了第三個也是最後一個 HTTP range request，以獲取音訊/視訊資料並可以開始播放視訊。這導致浪費了超過半兆位元組的頻寬以及 210 ms 的播放延遲！僅僅是因為瀏覽器找不到 moov 原子。

如果你的伺服器沒有配置 HTTP range request，情況甚至會更糟：瀏覽器無法跳過查詢 moov 這一步，以至於不得不下載整個檔案。這也是你需要 支援部分下載來優化你的網站 的另一個原因。

為 HTML5 流傳輸準備 MP4 視訊的理想方法是（重新）組織檔案，以便 moov處於最開始的位置。這樣一來，就可以避免瀏覽器下載整個視訊或者為了嘗試找到 moov 而浪費時間發起額外的請求。具有流優化視訊的網站的瀑布圖如下:

mp4-fast-start

開始位置包含 moov 的檔案，視訊會下載播放得更快，帶來的結果是更好的使用者體驗。

如何優化 MP4 視訊以獲得更快的流傳輸速度

我們已經知道為了優化視訊的 HTML5 流傳輸，你需要重新組織 MP4 原子，以便 moov 原子處於開始位置。 那麼我們如何做呢？大部分視訊編碼軟體都有一個 **“針對網頁優化”**或 **“針對流傳輸優化”**的選項來做這件事。當你建立視訊時，你需要檢視你視訊編碼設定以確認它是優化的。例如，在下面的螢幕截圖中，我們可以看到開源視訊編碼工具 Handbrake 的 “Web Optimized” 選項，用來將 moov 原子放在開始位置:

handbrake

如果你從原始資源視訊建立 MP4 檔案，這是一個可行的解決方案，但是如果你已經有一個 MP4 檔案了呢？

你可以重組已存在的視訊來優化它在網頁流傳輸的表現。例如，開源的命令列視訊編碼工具 FFMpeg 就可以重組 MP4 檔案的結構來讓 moov 原子處於開始位置。不同於初始編碼視訊那樣非常耗時和佔用 CPU ，重組檔案很容易操作。而且，他不會對原始視訊質量造成任何影響。以下是用 ffmpeg 來優化一個叫做 input.mp4 的視訊檔案流傳輸的例子，匯出的視訊叫做 output.mp4。

ffmpeg -i input.mp4 -movflags faststart -acodec copy -vcodec copy output.mp4
複製程式碼

-movflags faststart 引數告訴 ffmpeg 把 MP4 視訊的原子們重新排序以使得 moov 位於開始位置。我們同樣指示 ffmpeg 拷貝視訊和音訊資料而不是重新編碼，所以沒有任何改變。

為了 Rigor 網站的顧客，我們向 Rigor 優化新增了新的檢測工具。我們的效能分析和優化產品，可以檢測還沒有針對 HTM5 視訊流傳輸進行優化的 MP4 檔案。如果你只是想快速檢測自己網站，你可以用 我們免費的效能報告。

總結

不管你是將 GIF 動畫轉化為 MP4 視訊片段，還是已經有一堆 MP4 視訊，如果你優化檔案結構，你都可以使得這些視訊載入並開始播放de更快。通過重排原子讓 moov 原子處於開始位置，使得瀏覽器跳過傳送額外的 HTTP range request，避免嘗試定位 moov 原子。這允許瀏覽器立即開始流視訊傳輸。你通常可以在最初建立視訊時配置一個選項，以優化流傳輸。 如果你已有檔案，則可以使用 ffmpeg 之類的程式對檔案進行重排，而不更改其內容。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章