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

【问题标题】：Best practices for loading videos on a web page?在网页上加载视频的最佳做法？
【发布时间】：2015-11-05 15:56:38
【问题描述】：

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

【问题讨论】：

我没有在网站上看到背景视频。
@KevinJantzer 如果您访问 airbnb.com 并等待几秒钟，背景图像将转换为视频。如果您检查 DOM，您将在 hero 中看到以下代码：<video preload="auto" loop="loop" id="pretzel-video" class="video-playing">，然后它有两个视频源，具体取决于您的浏览器支持。这些视频链接到muscache.com，我想这是AirBnb的CDN。
看起来他们正在播放它。
@j08691 你能更详细地解释一下吗？和 WebSocket 一样？喜欢this example？

标签： javascript ajax performance video

【解决方案1】：

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

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

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

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

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

您无法通过 WebPageTest 了解真实情况。与其依赖第三方在他们的环境中评估页面，不如使用Fiddler 或 Chrome 开发者工具上的“网络”选项卡查看实际发送的流量。

【讨论】：