如何让视频在网页上加载得更快？答案

【问题标题】：How do I get video to load faster on a web page?如何让视频在网页上加载得更快？
【发布时间】：2015-08-07 22:55:35
【问题描述】：

我开始向网页添加更多视频，但对于这项任务的新手，我正在尝试在质量和加载时间之间找到适当的平衡。

我在this page 中添加了两个视频（向下滚动到红色汽车旁），您可以看到这些视频。第一个是 720p，但需要很长时间才能加载。

这是我正在使用的代码：

<video autoplay="" class="video" loop="" muted="">
  <source src="/assets/video/Newport-beach-video.mp4" type="video/mp4" /> 
  Your browser does not support video.
</video>

我研究了 html 5 和视频，但我真的很想了解基于网络的视频的最佳编码是什么以及如何优化网页上的加载。

【问题讨论】：

您是否通过 http 提供视频，就在您的网络服务器上？
是的。这些视频位于同一台服务器上。感谢您发现错字。
好吧，首先，您在此服务器上托管多个站点。这告诉我它没有你需要的果汁，而且你可能没有来自服务器的适当带宽来可靠地为每个人流式传输。您正在寻找高分辨率的作品集质量视频，而不是 youtube 质量（或者我想您会使用 youtube）。简单的编码优化不会让你到达那里。您将要研究一些流媒体视频托管。有非常实惠的解决方案（通常比您的常规托管便宜），即使是 CDN 也会让您做得更好。
我只托管了几个站点，而且流量不高，但是带宽显然不足以传送视频。我会对 YouTube 的质量感到满意，但宁愿在没有所有控件的情况下使用干净的外观，尤其是对于全角背景视频。您可以提供的任何其他指导都会有所帮助。
您可以查看重新设置 YouTube 播放器的外观。有几种方法，包括一些服务，如reembed.com 这值得回答吗？哈哈。

标签： video video-streaming html5-video

【解决方案1】：

正如 Madness 上面所说，托管视频是一个专业领域，正如您所指出的，质量与速度之间的平衡是关键。

对于网站上不同类型的内容（通常是静态内容和动态内容）使用单独的网络服务器是很常见的，但也适用于视频等特殊内容。

按照您的案例的复杂性/费用的粗略顺序提出一些建议：

在亚马逊 S3 上托管视频，使用他们的 CDN Cloudfront 来帮助加快交付速度（博客中讨论的示例：https://aws.amazon.com/blogs/aws/using-amazon-cloudfront-for-video-streaming/）
在 Brightcove、Wistia 等专门的流媒体视频托管网站上托管视频（示例指南：http://support.brightcove.com/en/video-cloud/docs/quick-video-publishing）
设置您自己的流媒体服务器来托管您的视频（示例overveiw：http://www.wowza.com/uploads/wowza4/documents/WowzaStreamingEngine-Product-Overview_final.pdf）

值得了解典型的流媒体服务器如何平衡质量和速度，以帮助您确定最佳方法：它们使用一种称为自适应比特率流的技术。

这实质上会为您的视频创建多个比特率版本，然后将它们分成相等的块（从“时间”的角度来看是相等的，而不是大小）。然后，客户端可以从当前网络条件下最合适的比特率请求下一个块所需的比特率——如果此时网络不好，它将获得一个低比特率的块，如果它是好的，则获得一个高比特评价块。

通常，视频以低比特率或中等比特率开始，以便快速开始。

如果您在播放 HTML5 视频时查看统计信息，您可以在 YouTube 上看到这一点。

使用其中一种托管服务将对您隐藏所有这些复杂性，因此它们很受欢迎......

【讨论】：

嗨，米克，这正是我需要的答案。感谢您抽出宝贵时间提供如此有用的详细信息。