在页面中嵌入许多小电影（gif vs mp4 vs webm vs ?）

Question

我正在制作一个网页，其中包含大约 20-25 部小分辨率 (~56x56) 和短片 (~3 秒) 电影，这些电影将设置为自动播放和循环播放，因此它们将在页面上循环播放一直。它们大多分散在整个页面中，因此无法轻松合并到更大的电影中。

我正在尝试确定要使用的正确格式，平衡文件大小、质量和处理器开销。

就质量和文件大小而言，mp4 似乎是最佳选择，但是在页面上嵌入许多小型 mp4 对我来说感觉很慢并且让我的电脑变热。尽管如果它们是一个 mp4，它也只有 300x240 左右——如果将它们分开，似乎会有很多 CPU 开销。

gif 质量较低和较大的文件大小，但 CPU 性能感觉更流畅。但我无法证明这一点，因为我没有测量它——已知 gif 的性能比 mp4 更好吗？

我没有尝试过其他格式（webm、avi、ogg 等），但我不确定大多数浏览器对所有这些格式的支持程度，我希望网页可以从多个浏览器/国家/地区查看。

如何确定用于这些视频的最佳格式？是否有可以测量我的网页的 CPU 性能的工具，以便我可以量化性能问题？

Answer 1

在一个页面上播放多个视频对于大多数操作系统来说都是一个问题，因为视频解码和播放是 CPU 密集型的。

某些系统还会在视频播放“管道”（操作系统、浏览器和播放器执行解压、解码、准备和显示视频的一系列功能）中包含硬件元素（硬件加速），这些元素可能不支持或者并行播放的容量有限。

如果您事先知道要在页面上播放哪些视频，并且您没有为不同用户提供太多不同的视频组合等，则有一个相当常见的解决方法：这是组合视频在服务器端变成一个视频。这意味着用户仍然可以看到看起来像是多个视频的内容，但您正在服务器端完成所有繁重的工作。

缺点是您无法启动或停止单个视频或快速更改视频组合。

如果您还计划支持移动浏览器，则应注意大多数移动设备不支持自动播放（以帮助节省用户带宽），而较小的设备（如手机）通常不支持内嵌视频（视频将始终完整播放屏幕）。 [2017 年 2 月更新：随着移动数据速率的提高，移动设备开始支持自动播放，现在大多数都将支持内联，iOS 在 iOS 10 中添加了此功能]