Javascript 在单个网页上显示至少100个视频

我想显示一个包含非常短视频的网页：

• 视频长度为1-2秒，大小相同（约100px宽）
• 它们以矩阵形式显示（例如10x10）
• 播放视频由用户交互触发（单击或悬停）

到目前为止，我已经尝试使用jQuery插入视频标签，但当我看到大约60个视频时，我的浏览器（Chrome）挂起

我的问题是：在一个网页上显示如此大量的视频有什么诀窍吗？我应该注意什么问题以确保在用户开始交互之前视频已经准备好播放

编辑：我知道这不是常见的做法，但这个项目是一个艺术装置，我需要能够触发所有的视频（或移动图像）的要求，没有延误。另一方面，初始加载时间并不重要，因为用户会意识到负载很重

---

谢谢：）

IMO“视频在用户开始交互之前就准备好了（…）”与leightweight DOM相矛盾。你不能两者兼得。我会尝试显示缩略图并用交互初始化视频。

IMO“视频在用户开始交互之前就准备好了（…）”与leightweight DOM相矛盾。你不能两者兼得。我会尝试显示缩略图并使用交互初始化视频。

您可以尝试使用

使用

 <video width="320" height="240" controls>
  <source src="embed Link" type="video/mp4">
  Your browser does not support the video tag.
</video> 

您的浏览器不支持视频标记。

---

html内部的标签。然后您可以通过给每个对象一个标记来访问它

您可以尝试使用

使用

 <video width="320" height="240" controls>
  <source src="embed Link" type="video/mp4">
  Your browser does not support the video tag.
</video> 

您的浏览器不支持视频标记。

---

html内部的标签。然后，您可以通过给每个对象一个标签来访问它

您可以尝试只显示一个图像列表，当用户单击特定图像时，视频开始加载和播放。您可以尝试只显示一个图像列表，当用户单击特定图像时，视频开始加载和播放。是的，我大体上同意这一点。但这个具体的案例是一个艺术装置，所以我需要所有的视频准备好播放，没有延误。初始加载时间并不重要。是的，我大体上同意这一点。但这个具体的案例是一个艺术装置，所以我需要所有的视频准备好播放，没有延误。初始加载时间并不重要。