优化多个 HTML5 视频

Question

我正在创建的网页上有多个 HTML5 视频。它们像 gif 一样自动播放和循环播放。

但是，该页面几乎无法加载 6 秒左右 15 秒的视频。有没有办法优化这些视频，以便页面更快地加载它们和自身？

编辑：

大多数 Buzzfeed 页面在一个页面上都有几十个视频“gif”，它们可以正常加载。我想知道我怎么能做到这一点？当前浏览器变得超载。

Answer 1

大多数设备都优化了硬件和软件来播放视频，例如减少 CPU 和延长电池寿命。

一旦您要求设备同时播放多个视频，您就会开始超载任何最佳路径，并且播放可能会退回到软件来完成所有繁重的工作。

如果您的特定应用程序可以使用该方法，解决此问题的一种方法是将服务器端的视频组合成一个视频。

您仍然可以通过隐藏主要控件并在相关区域上添加带有单个按钮的叠加层来使其看起来像单独的视频。

如果这对您不起作用，那么将视频设为低带宽并尽可能短会有所帮助。如果您可以避免自动播放，这显然也会产生很大的不同。

请注意，Buzzfeed 确实在一个页面上有多个视频，但是当我查看他们的页面时它们不会自动播放，这意味着他们只需下载和显示缩略图（也许我们正在查看不同的页面 - 如果你有一个自动播放多个视频的示例页面，你能给一个链接吗？_。