ios10 safari 的 html 页面中的视频元素是否有限制答案

【问题标题】：is there a limit of video elements in an html page on ios10 safariios10 safari 的 html 页面中的视频元素是否有限制
【发布时间】：2018-01-08 04:17:50
【问题描述】：

我有一个用于显示 gif 的 html 页面。我想通过将这些 gif 转换为视频来优化它。我让它们静音，设置'displayinline'和'autoplay'。

我在带有 ios 10 safari 的 iphone 上对其进行了测试；但奇怪的是，当视频数量大于 16(maybe) 时，其中一些（在随机位置）会变成一个空方格。我为每个视频设置了相同的 'src' 值，没有改变。

那么，我想知道 ios safari 中的 html 页面中的视频是否有限制？

<html>
<body>
<style>
video{
  width:100%;
  margin-bottom: 20px;
}
</style>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline  autoplay></video>
</p>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline  autoplay></video>
</p>
<!--....same video repeat 20 times -->
</body>
</html>

【问题讨论】：

应该没有限制，但是有这么多视频肯定会影响内存

标签： ios html video webkit mobile-safari

【解决方案1】：

这是很古老的；然而，简短的回答是“是的，有一个限制。”

这完全取决于你的设备、你的 ios 版本和魔法的某种组合，但你不能在 ios 的单个页面上添加超过 x 个视频。第一个 x 个视频可以正常加载；添加到页面的后续视频将永远不会在0 之后获得readyState，并且永远不会加载，也永远不会播放。我见过 x 低至 4 个元素，高至 16 个元素。

我希望我能更具体地告诉你视频元素的数量，甚至是原因（我们可以假设原因，但没有官方答案）。

【讨论】：

【解决方案2】：

播放视频是一项 CPU 密集型任务，并且如 Mohammad 所说，还会占用内存和网络带宽。

许多设备都会为视频播放提供硬件支持，以帮助加快播放速度并减少处理和电池使用量。但是，这通常不会被设计为支持同时播放多个视频。

大多数设备都会显示您所描述的测试页面类型存在一些问题 - 不同浏览器和不同机器上的症状可能不同，但几乎所有设备都很难同时播放这么多视频。

这种类型的页面的典型方法（尽管它可能无法满足您的需求）是为所有视频设置缩略图，并在选择或悬停在其中时开始播放它们。

【讨论】：