在网页上加载视频的最佳做法？

Question

想了解AirBnb如何在主页上快速加载20MB背景视频文件。在WebPageTest检查他们的主页后，我注意到视频没有显示在任何下载的资源中，这使得它得分如此之高。当我尝试这种策略时，通过AJAX异步加载视频，视频仍然作为下载资源显示在WebPageTest上，但是在DOM加载之后。所以我真的不确定AirBnb是如何做到这一点的。有没有人有想法？

Answer 1

AirBnb在这里没有做任何特别的事。他们只是使用渐进式下载开始播放媒体，这意味着在视频仍在下载时开始播放。

在他们的CDN上，他们上传了一些相当大的MP4文件，其中包含两个重要特征：

1. 索引信息（MOOV atom）已移至MP4文件的开头
2. 视频采用浏览器支持的格式和编解码器进行编码

由于这些特性，所有网站所要做的就是告诉您的浏览器开始播放源URL，它会做正确的事情：它向CDN发出Web请求并开始下载文件。只要有足够的数据传输到开始播放，它就会这样做。

最后，我不能肯定地说为什么WebPageTest没有向您显示正在驱动视频的视频MP4，但它们肯定存在，并且URL看起来像https://a0.muscache.com/airbnb/static/Xxxxx-X1-1.mp4。我怀疑他们正在查看您的用户代理，以决定向您发送哪个文件，并且根本不向谷歌和WebPageTest等机器人发送任何视频。

你没有通过WebPageTest获得真实的故事。您应该使用Fiddler或Chrome开发者工具上的网络标签来观看实际发送的流量，而不是依赖第三方评估其环境中的网页。