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

Question

我开始向网页添加更多视频,但我正在尝试在质量和加载时间之间找到适当的平衡.

我在此页面中添加了两个视频(向下滚动到红色汽车旁边),您可以看到视频.第一个是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服务器是很常见的,通常是静态内容和动态内容,但也适用于视频等专用内容.

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

• 在亚马逊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上看到此操作.

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