html - 优化多个 HTML5 视频

标签 html performance video html5-video autoplay

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

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

编辑:

大多数 Buzzfeed 页面在一个页面上有几十个视频“gif”,并且加载正常。我想知道我该怎么做?目前浏览器过载。

最佳答案

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

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

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

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

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

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

关于html - 优化多个 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39671204/

相关文章:

javascript - Jquery/Javascript 插件不会重复

haskell - 惯用的高效 Haskell append ?

css - 限制标题背景视频的高度?

javascript - 悬停时的文本滚动不适用于 jQuery 2.2.0

javascript - 强制用户更新 Metro 应用程序的正确方法是什么?

html - 超链接点击半径大于实际文本

image - FFMPEG "Could find no file with path"和 "No such file or directory"

apache - Apache 后面的 Tomcat 下载 Servlet 导致 httpd 高 CPU

r - 加速创建矩阵列表,每个矩阵都具有来自非常大矩阵的每一列的指定维度

browser - 不需要浏览器插件的视频格式