從天貓某活動視頻3次請求提及

本文做者：張鑫旭、踹歪

原創聲明：本文爲閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯繫公衆號 ( id: yuewen_YFE ) 獲取受權，並註明做者、出處和連接。

本文源自閱文前端團隊踹歪面授分享，我只是代筆變成文字版，歡迎關注這位「精通 javascript 單詞拼寫」小夥伴。

1、視頻加載的 3 次請求

在座諸位，請打開瀏覽器，新開一個標籤頁，打開開發者工具，切換到 network 面板 → Media 選項，而後 — 複製下面地址（天貓某活動備份地址）到地址欄，回車：ali-tmhly.h5.neone.com.cn/ 。此時，你會看到一個名爲 video2 的 mp4，前先後後發送了 3 次請求：

這是糟糕的！應該只有 1 次請求才是最佳的！

更糟糕的是，這種視頻 3 次請求的現象很是廣泛！

更更糟糕的是，不少前端開發都沒有意識到有這個問題。

2、3 次請求的緣由

一 個MP4 視頻文件，不僅僅是視頻內容，還有不少其餘信息，尺寸，時長，字幕，版權信息等。

這些信息被放在一個一個的 box 中，換句話說就是，一個 MP4 文件由不少個 box 組成的，用以存儲媒體信息。

其中，有個與請求數有關的 box 名叫 MOOV BOX。

MOOV BOX

Moov box 存放的是如何播放視頻的信息，如尺寸和每秒的幀數，則存儲在叫作 moov 的特殊 box 中。你能夠認爲 moov box 是某種意義上的 MP4 文件目錄。

當你播放視頻時，程序會查找 MP4 文件，定位 moov box 的位置，而後藉此去查找視頻和音頻的起始位置來開始播放。

Box 可能以任意順序排列，因此程序一開始並不知道 moov box 哪裏。若是是本地播放，沒有任何問題，由於你已經擁有整個視頻文件；但若是在線觀看，也就是流傳輸 HTML5 視頻時，就會有問題了。

讀取 MOOV 過程

瀏覽器直接發起 HTTP MP4 請求，讀取響應 body 的開頭，若是發現 moov 在開頭，就接着往下讀 mdat。若是發現開頭沒有，先讀到 mdat，立馬 RESET 這個鏈接，節省流量，經過 Range 頭讀取文件末尾數據，由於前面一個 HTTP 請求已經獲取到了 Content-Length ，知道了 MP4 文件的整個大小，經過 Range 頭讀取部分文件尾部數據也是能夠讀取到的。

也就說，之因此上面天貓某活動 MP4 視頻會發起 3 次請求，就是由於視頻的 moov box 放在了文件末尾。我畫了個圖示意了下：

3、如何避免視頻的3次請求

很簡單，使用工具把 Moov box 提到視頻的前面就行了。

具體能夠：

1. Handbrake

HandBrake 乃 Web MP4 視頻優化工具不二之選，其中就有 moov box 前置優化 web 請求的功能。

HandBrake MAC，Windows 均支持，免費開源，更多能力，如視頻壓縮等，能夠參見這篇文章：「HandBrake使用圖文教程」。

2. ffmpeg 指令

以下：

ffmpeg -i 你的視頻.mp4 -movflags faststart -acodec copy -vcodec copy 輸出的視頻.mp4
複製代碼

FFmpeg 官網地址：ffmpeg.org/。

FFmpeg 是一套能夠用來記錄、轉換數字音頻、視頻，並能將其轉化爲流的開源計算機程序。採用 LGPL 或 GPL 許可證。它提供了錄製、轉換以及流化音視頻的完整解決方案。

總之，很強，你們有興趣能夠自行探索一番。

4、優化以後

優化後，能夠看到 Moov 信息前置了：

此時，視頻請求就只有一次了，口說無憑，直接看證據，狠戳這個demo，起點某視頻活動。

能夠看到，加載的時候，就只會有 1 個請求：

趕快看看本身項目中的視頻有沒有 3 次請求的問題吧！

查看更多分享，請關注閱文集團前端團隊公衆號: