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

Question

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

我在 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 和视频，但我真的很想知道基于网络的视频的最佳编码是什么以及如何优化网页上的加载。

Answer 1

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

通常为网站上不同类型的内容使用单独的 Web 服务器，通常是静态内容与动态内容，但也适用于视频等专门内容。

针对您的情况的粗略排序 complexity/expense 的一些建议：

在亚马逊 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）
设置您自己的流媒体服务器来托管您的视频（示例概述：http://www.wowza.com/uploads/wowza4/documents/WowzaStreamingEngine-Product-Overview_final.pdf）

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

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

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

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

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

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

How do I get video to load faster on a web page?

video

video-streaming

html5-video