隨著 Flash 的落寞 以及 移動裝置的爆發性增長 ，越來越多的內容以html5 視訊的方式傳遞。在上一篇文章中你甚至能看到 使用html5 視訊替換 GIF 動圖來優化網站訪問速度 這樣的技巧。然而事實上，視訊格式本身就有一堆優化技巧可用來改善它們的效能表現。其中非常重要的一點，就是視訊檔案可以合理優化以便作為html5 視訊在網路上串流播放。否則的話，播放視訊檔案可能會有數百毫秒的延遲，同時導致數兆位元組的頻寬被浪費，只因網站訪客試圖播放你的視訊。在這篇文章裡，我將向你展示如何優化視訊檔案以便在網路上更快地串流播放。

MP4 串流是如何工作的？

html5 視訊是無需像 Flash 那樣需要外掛支援即可觀看視訊的跨瀏覽器方案。到現今 2016 年， 經過 H.264 編碼的視訊儲存在 MP4 容器之中 （以下我將簡單地稱其為 MP4 視訊），並統一成為所有線上html5 視訊的標準格式。所以，當我們談及優化html5 視訊時，我們真正討論的是如何優化 MP4 檔案以便更快地串流播放。至於如何做到，則與 MP4 檔案的結構以及視訊串流如何工作有很大關係。

MP4 檔案由名為 "atoms" 的資料塊構成。有儲存字幕或章節的atoms，同樣也有儲存視訊和音訊資料的atoms。至於視訊和音訊atoms處於哪個位置，以及如何播放視訊諸如解析度和幀速等，這些元資料資訊都儲存於一個名為moov的特殊atom之中。你可以將moovatom 理解成 MP4 檔案的某種目錄列表。

當你播放視訊時，程式搜尋整個 MP4 檔案，定位moovatom，然後使用它找到視訊和音訊資料的開頭位置，並開始播放。然而，atoms可能以任何順序儲存，所以程式無法提前得知moovatom 在檔案的哪個位置。如果你已經擁有整個視訊檔案，搜尋並找到moovatom 問題並不大。然而，當你還沒有拿到整個視訊檔案（比如說你串流播放html5 視訊時），恐怕就希望可以有另外一種方式。而這，就是串流播放視訊的關鍵點！你無需事先下載整個視訊檔案，就可以立即開始觀看。

當串流播放時，你的瀏覽器會請求視訊並接受檔案頭部，它會檢查moovatom 是否在檔案開頭。如果moovatom 沒有在檔案開頭，則它要麼得下載整個檔案並試圖找到moov，要麼下載視訊檔案的不同小塊並尋找moovatom，反覆搜尋直到遍歷整個視訊檔案。

搜尋moovatom 的整個過程需要耗費時間和頻寬。很不幸的是，在moov被定位之前的這段時間裡，視訊都不能開始播放。從下面的截圖中，我們能看到瀏覽器播放未經優化的 MP4 視訊時的瀑布圖。

你能看到瀏覽器在播放視訊前進行了 3 次請求。第一個請求中，瀏覽器使用 HTTP range request下載了視訊檔案的前 552 KB 位元組。通過 HTTP 返回碼的 206 Partical Content 報告，以及仔細檢視請求頭部資料，我們可以得知這一點。然而，moov

如果你沒有配置伺服器以支援 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，以便moovatom 位於檔案開頭。那麼我們究竟要如何做呢？大多數視訊編碼軟體都有“為 web 優化”或“為串流優化”的選項，正是用來做這件事情的。當建立視訊時，你應該檢查一下視訊編碼設定，以確保它被優化。比如在下面的截圖中，我們看到開源軟體Handbrake有一個“Web Optimized”的選項，它將確保moovatom 處於檔案開頭。

當從源視訊建立 MP4 的時候，這是一個可行的解決方案。但是，如果你擁有的已經是 MP4 檔案呢？

你仍然可以重組已有的視訊，優化它以適應 web 串流播放。開源編碼器FFMpeg命令列可以重組 MP4 檔案，將moovatom 放到檔案開頭。不像初始編碼時那樣消耗時間和 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 這類工具來重組檔案，而不會更改其它的內容。