在網頁上加載視頻的最佳做法？

Question

想了解AirBnb如何能夠在他們的主頁上快速加載20MB的背景視頻文件。在檢查WebPageTest的主頁後，我注意到該視頻沒有出現在任何下載的資源中，這使得它的得分如此之高。當我嘗試過這種策略時，通過AJAX異步加載視頻，視頻仍然顯示在WebPageTest上作爲下載資源，但在DOM加載之後。所以我真的不知道AirBnb是如何做到這一點的。有人有想法嗎？

Answer 1

AirBnb在這裏沒有做任何特別的事情。他們只是開始使用漸進式下載來播放媒體，這只是意味着在視頻仍在下載時開始播放。

在他們的CDN，他們已經上傳了一些相當大的MP4文件有兩個重要特徵：

1. 的索引信息（MOOV原子）已經被移動到MP4文件
2. 的視頻的開頭以您的瀏覽器支持的格式和編解碼器編碼

由於這些特點，所有網站所要做的就是告訴您的瀏覽器開始播放源URL，它會做正確的事情：它使網絡請求CDN和b例如下載文件。一旦足夠的數據傳輸開始播放，它就這樣做了。

最後，我無法確定爲什麼WebPageTest不會顯示驅動視頻的視頻MP4，但它們當然存在，並且網址看起來像https://a0.muscache.com/airbnb/static/Xxxxx-X1-1.mp4。我懷疑他們正在查看您的用戶代理以決定將哪些文件發送給您，並且根本不會向Google和WebPageTest等機器人發送任何視頻。

你沒有通過WebPageTest獲得真實的故事。您不應依賴第三方來評估其環境中的網頁，您應該使用Fiddler或Chrome開發人員工具的網絡標籤查看實際發送的流量。