performance - 在页面中嵌入许多小电影(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 中添加了这个]