隨着 Flash 的落寞 以及 移動設備的爆發性增長 ，越來越多的內容以 html5 視頻的方式傳遞。在上一篇文章中你甚至能看到 使用 html5 視頻替換 GIF 動圖來優化網站訪問速度 這樣的技巧。然而事實上，視頻格式本身就有一堆優化技巧可用來改善它們的性能表現。其中非常重要的一點，就是視頻文件可以合理優化以便作為 html5 視頻在網絡上串流播放。否則的話，播放視頻文件可能會有數百毫秒的延遲，同時導致數兆字節的帶寬被浪費，只因網站訪客試圖播放你的視頻。在這篇文章里，我將向你展示如何優化視頻文件以便在網絡上更快地串流播放。
MP4 串流是如何工作的？
html5 視頻是無需像 Flash 那樣需要插件支持即可觀看視頻的跨瀏覽器方案。到現今 2016 年， 經過 H.264 編碼的視頻存儲在 MP4 容器之中 （以下我將簡單地稱其為 MP4 視頻），並統一成為所有在線 html5 視頻的標准格式。所以，當我們談及優化 html5 視頻時，我們真正討論的是如何優化 MP4 文件以便更快地串流播放。至於如何做到，則與 MP4 文件的結構以及視頻串流如何工作有很大關系。
MP4 文件由名為 "atoms" 的數據塊構成。有存儲字幕或章節的 atoms ，同樣也有存儲視頻和音頻數據的 atoms 。至於視頻和音頻 atoms 處於哪個位置，以及如何播放視頻諸如分辨率和幀速等，這些元數據信息都存儲於一個名為 moov 的特殊 atom 之中。你可以將 moov atom 理解成 MP4 文件的某種 目錄列表 。
當你播放視頻時，程序搜尋整個 MP4 文件，定位 moov atom，然后使用它找到視頻和音頻數據的開頭位置，並開始播放。然而， atoms 可能以任何順序存儲，所以程序無法提前得知 moov atom 在文件的哪個位置。如果你已經擁有整個視頻文件，搜尋並找到 moov atom 問題並不大。然而，當你還沒有拿到整個視頻文件（比如說你串流播放 html5 視頻時），恐怕就希望可以有另外一種方式。而這，就是串流播放視頻的關鍵點！你無需事先下載整個視頻文件，就可以立即開始觀看。
當串流播放時，你的瀏覽器會請求視頻並接受文件頭部，它會檢查 moov atom 是否在文件開頭。如果 moov atom 沒有在文件開頭，則它要么得下載整個文件並試圖找到 moov ，要么下載視頻文件的不同小塊並尋找 moov atom，反復搜尋直到遍歷整個視頻文件。
搜尋 moov atom 的整個過程需要耗費時間和帶寬。很不幸的是，在 moov 被定位之前的這段時間里，視頻都不能開始播放。從下面的截圖中，我們能看到瀏覽器播放未經優化的 MP4 視頻時的瀑布圖。
你能看到瀏覽器在播放視頻前進行了 3 次請求。第一個請求中，瀏覽器使用 HTTP range request 下載了視頻文件的前 552 KB 字節。通過 HTTP 返回碼的 206 Partical Content 報告，以及仔細查看請求頭部數據，我們可以得知這一點。然而， moov atom 並沒有被找到，瀏覽器仍不能開始播放視頻。接下來，瀏覽器又使用一次范圍請求（range request）拉取視頻文件最末尾的 211 KB 字節。這次則包含了 moov atom，可以告知瀏覽器視頻和音頻從何處開始播放。終於，瀏覽器做了第三次也是最后一次請求，獲得視頻/音頻數據，並開始播放視頻。到這里，我們已經浪費了超過半兆字節的帶寬，並將視頻的播放推遲了 210 毫秒！僅僅是因為瀏覽器無法找到 moov atom。
如果你沒有配置服務器以支持 HTTP 范圍請求（range request），事情甚至會變得更糟。瀏覽器將不能來回部分請求來找到 moov ，而 必須下載整個視頻文件 。這也是為何你應該 優化服務器支持部分下載技術 的另一原因。
將 MP4 視頻用作 html5 串流的理想方式，就是重組視頻文件，使得 moov 正好位於文件開頭。這樣的話，瀏覽器可以避免下載整個文件，或者浪費時間進行額外請求以找到 moov 。為串流優化過的視頻網站請求瀑布圖，如下圖所示：
將 moov 置於文件開頭，視頻將會更快地加載和播放，帶來更好的用戶體驗。
新片場https://www.wode007.com/sites/73286.html 傲視網https://www.wode007.com/sites/73285.html
優化 MP4 以便更快的網絡串流
我們已經知道，要想優化視頻為 html5 串流播放，則需要重組 MP4 atoms，以便 moov atom 位於文件開頭。那么我們究竟要如何做呢？大多數視頻編碼軟件都有“為 web 優化”或“為串流優化”的選項，正是用來做這件事情的。當創建視頻時，你應該檢查一下視頻編碼設置，以確保它被優化。比如在下面的截圖中，我們看到開源軟件Handbrake有一個“Web Optimized”的選項，它將確保 moov atom 處於文件開頭。
當從源視頻創建 MP4 的時候，這是一個可行的解決方案。但是，如果你擁有的已經是 MP4 文件呢？
你仍然可以重組已有的視頻，優化它以適應 web 串流播放。開源編碼器FFMpeg命令行可以重組 MP4 文件，將 moov atom 放到文件開頭。不像初始編碼時那樣消耗時間和 CPU，重組文件是一項更容易的操作，並且也不會以任何方式損失視頻質量。下面是使用 ffmpeg 優化 input.mp4 文件的例子，輸出文件名為 output.mp4 。
ffmpeg -i input.mp4 -movflags faststart -acodec copy -vcodec copy output.mp4-movflags faststart 參數告訴 ffmpeg 重組 MP4 文件 atoms，將 moov 放到文件開頭。我們同時告訴 ffmpeg 拷貝視頻和音頻數據，而非重新編碼，這樣其它任何東西都不會發生變動。
針對 Rigor 的客戶，我們已經給 Zoompf-- 我們的性能分析和優化產品 --添加了一項新功能，它將會檢測 MP4 文件是否已經為 html5 視頻串流優化。如果你僅僅想要快速檢查一下你的網站，可以使用 我們的免費性能報告服務 。
結論
無論你正在將 GIF 動圖轉換為 MP4 視頻，還是手頭已經有一大堆 MP4 視頻，你都可以優化文件結構，以使得這些視頻更快地加載和播放。通過重組 atoms 將 moov 放到文件開頭，瀏覽器可以避免發送額外的 HTTP range request 請求來搜尋和定位 moovatom。而這，將允許瀏覽器立即開始串流播放視頻。通常情況下，當你初始創建視頻時，可以配置選項讓其為串流播放而優化。如果你已有 MP4 文件，可以使用 ffmpeg 這類工具來重組文件，而不會更改其它的內容。