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所说，托管视频是一个专业领域，质量与速度的平衡是关键所在。

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

针对您案件的复杂性/费用粗略顺序的一些建议：

在亚马逊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）

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

这实际上创建了视频的多个比特率版本，然后将它们分成相等的块（从“时间”的角度来看，而不是大小）。然后，客户端可以从当前网络条件的最合适的比特率请求其所需的下一个块的比特率 - 如果网络现在是坏的，它将获得低比特率块并且如果它是好的高比特率块。

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

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

使用其中一个托管服务将隐藏所有这些复杂性，因此它们的受欢迎程度......

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

1 个答案: