- 原文地址:Optimizing MP4 Video for Fast Streaming
- 原文做者:BILLY HOFFMAN
- 譯文出自:掘金翻譯計劃
- 本文永久連接:github.com/xitu/gold-m…
- 譯者:HaoChuan9421
- 校對者:coolseaman、hrt96
隨着 Flash 的衰落 和 移動設備的爆炸式增加,愈來愈多的內容正在以 HTML5 視頻的方式發佈。你能夠經過 用 HTML5 視頻片斷代替 GIF 動畫 的方式來優化你的網站速度。然而,視頻文件自己就有大量可優化的地方,你能夠藉此提高它們的性能。html
其中最重要的一點是視頻文件必須通過適當優化才能做爲 HTML5 視頻在線播放。若是沒有這種優化,視頻可能會延遲數百毫秒,而只是試圖播放視頻的訪問者也可能會浪費兆字節的帶寬。在這篇文章中,我將向你展現如何優化視頻文件以得到更快的流傳輸速度。前端
在咱們 上一篇文章 的討論中,HTML5 視頻是一種跨瀏覽器觀看視頻的方式,不須要相似 Flash 的插件。截止到 2016 年,存儲在 MP4 容器文件中的 H.264 編碼視頻(下文將簡稱爲 MP4 視頻)已成爲全部在線 HTML5 視頻的標準格式。因此當咱們討論如何優化 HTML5 視頻,其實咱們是在討論如何優化 MP4 視頻以獲取更快的播放。而咱們優化的方式與 MP4 文件的結構以及流媒體傳輸的工做原理息息相關。html5
MP4 文件由叫作 原子 的數據塊組成。這些原子用以存儲字幕和章節等內容, 固然也包括視頻和音頻等顯而易見的數據。而視頻和音頻原子的元數據,以及有關如何播放視頻的信息,如尺寸和每秒的幀數,則存儲在叫作 moov
的特殊原子中。你能夠認爲 moov
原子是某種意義上的 MP4 文件目錄。android
當你播放視頻時,程序會查找 MP4 文件,定位 moov
原子的位置,而後藉此去查找視頻和音頻的起始位置來開始播放。遺憾的是,原子可能以任意順序排列,因此程序一開始並不知道 moov
原子在哪裏。若是你已經擁有整個視頻文件,查找 moov
原子是徹底沒問題的。但若是暫時沒有整個文件,好比流傳輸 HTML5 視頻時,就須要另闢蹊徑了。這纔是流媒體的重點!你無需先下載整個視頻便可開始觀看。ios
當流傳輸時,你的瀏覽器請求視頻資源並開始接收文件的開始部分。程序查找 moov
原子是否在開始的部分。若是 moov
原子不在開始位置,它必須下載整個文件才能嘗試找到 moov
,或者瀏覽器能夠從最末端的數據開始下載視頻文件的不一樣小片斷,以試圖找到 moov
原子。git
全部這些試圖找到 moov
的行爲浪費了時間和帶寬。遺憾的是,在找到 moov
以前,視頻是沒法播放的。 咱們能夠在下面的屏幕截圖中看到瀏覽器的瀑布圖,該瀏覽器試圖使用 HTML5 視頻來流傳輸未優化的 MP4 文件:github
你能夠看到瀏覽器在播放視頻以前發起了三次請求。 在第一次請求中,瀏覽器經過 HTTP range request 下載了 552 KB 的第一部分視頻。 咱們能夠經過 HTTP 狀態碼 206 Partial Content
以及查看響應頭的詳細信息來發現這些。然而,moov
原子並未包含在內,因此瀏覽器沒法開始視頻播放。接下來,瀏覽器經過 HTTP range request 獲取了後面的 21 KB 視頻文件。它包含 moov
原子,告訴瀏覽器視頻和音頻流的開始位置。最後,瀏覽器發起了第三個也是最後一個 HTTP range request,以獲取音頻/視頻數據並能夠開始播放視頻。這致使浪費了超過半兆字節的帶寬以及 210 ms 的播放延遲!僅僅是由於瀏覽器找不到 moov
原子。web
若是你的服務器沒有配置 HTTP range request,狀況甚至會更糟:瀏覽器沒法跳過查找 moov
這一步,以致於不得不下載整個文件。這也是你須要 支持部分下載來優化你的網站 的另外一個緣由。後端
爲 HTML5 流傳輸準備 MP4 視頻的理想方法是(從新)組織文件,以便 moov
處於最開始的位置。這樣一來,就能夠避免瀏覽器下載整個視頻或者爲了嘗試找到 moov
而浪費時間發起額外的請求。具備流優化視頻的網站的瀑布圖以下:瀏覽器
開始位置包含 moov
的文件,視頻會下載播放得更快,帶來的結果是更好的用戶體驗。
咱們已經知道爲了優化視頻的 HTML5 流傳輸,你須要從新組織 MP4 原子,以便 moov
原子處於開始位置。 那麼咱們如何作呢?大部分視頻編碼軟件都有一個 **「針對網頁優化」**或 **「針對流傳輸優化」**的選項來作這件事。當你建立視頻時,你須要查看你視頻編碼設置以確認它是優化的。例如,在下面的屏幕截圖中,咱們能夠看到開源視頻編碼工具 Handbrake 的 「Web Optimized」 選項,用來將 moov
原子放在開始位置:
若是你從原始資源視頻建立 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、前端、後端、區塊鏈、產品、設計、人工智能等領域,想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。