我可以预加载多个视频资源以加载到同一个 HTML5 <video> 元素中吗？答案

【问题标题】：Can I preload multiple video resources to load in the same HTML5 <video> element?我可以预加载多个视频资源以加载到同一个 HTML5 <video> 元素中吗？
【发布时间】：2010-09-09 20:54:40
【问题描述】：

我正在研究一个 Web 应用程序的详细信息，该应用程序涉及一个接一个地顺序加载一长串（非常短的）视频剪辑，用户偶尔会提供输入来确定要加载哪些视频剪辑的新方向.

我希望能够让浏览器一次预加载五个视频剪辑。然而，我们目前让网站工作的方式是通过单个视频元素，它的src 属性通过 JavaScript 不断更新。

是否有一种简单的方法可以让浏览器预加载多个视频剪辑，即使我最终将它们全部（一次一个）加载到同一个视频元素中？

【问题讨论】：

措辞非常好，非常清楚。欢迎使用 Stack Overflow！
谢谢！我不确定这个问题是否过于模糊或笼统。
我正在尝试做类似的事情，我认为我可能很接近。这个 api 确实有助于了解内部工作原理以及如何使用它们w3.org/TR/html5/video.html#video> 完成后回复
你能完成你想要的吗？我正在尝试做类似的事情，我想知道您是否可以强制浏览器以可预测的方式缓存视频。非常感谢您分享的任何经验...

标签： video html preload

【解决方案1】：

您可以通过在 JavaScript 中创建 <img> 标记并设置其 src 属性来在浏览器中预加载图像。尽管任何规范都没有要求，但所有浏览器都会下载图像并缓存它（假设它们的缓存没有被禁用）。

我不知道这是否适用于 HTML5 中的 <video> 元素，但它可能会。可以试试吗？

【讨论】：

我尝试过类似的方法，但我的问题是页面设计为只有一个
我应该解释一下，有问题的视频元素基本上是整个页面。我想我需要一种方法来告诉浏览器抓取一组文件并缓存它们，直到需要一次将它们加载到视频元素中。而且我需要它在 JavaScript 中发生，因为所需的文件会根据用户输入而改变。
@Sergio1132：啊，所以浏览器似乎没有缓存视频文件。在这种情况下，我认为你将不得不改变你的方法——创建额外的 <video> 元素，然后将它们换入，而不是只使用一个 <video> 元素。
谢谢，我最终按照这些思路做了一些事情。我将多个隐藏的
@Sergio1132：啊，好东西。出于兴趣，与仅通过 CSS 显示和隐藏 <video> 元素相比，涉及 <canvas> 元素有什么优势？

【解决方案2】：

我很好奇您是否碰巧完成了您正在从事的项目？我正在尝试一个带有播放列表的 html5 视频播放器，想知道你是否遇到了任何大问题。加载/播放多个视频文件是否存在性能问题？你能在 iPad 上运行它吗？你有 IE 的后备方案吗？

我的方法是：拥有一个 <canvas> 元素和多个隐藏的 <video> 元素，并使用画布 drawImage() 函数在视频之间显示和交叉淡入淡出。

【讨论】：