我能事先加载多个视频资源以在同一个HTML5 <video>元素中加载吗？

Question

我正在制作一个涉及顺序加载长系列(非常短)视频剪辑的Web应用程序，每个视频剪辑都会接着上一个播放，偶尔需要用户输入来建立新的方向以加载相应的视频。

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

是否有一种简单的方法可以让浏览器在我将它们全部(一个接一个地)加载到同一个视频元素中的情况下预加载多个视频剪辑?

- S P

---

非常妙语连珠，非常清晰。欢迎来到 Stack Overflow！ - Paul D. Waite

谢谢！我不确定这个问题是否太模糊或太笼统了。 - S P

我正在尝试做类似的事情，觉得自己可能已经接近了。这个 API 真的很有帮助，可以看到内部工作原理以及如何使用它们 http://www.w3.org/TR/html5/video.html#video ，等我做完会回复。 - PeaceLoveFamily

你能完成你想做的事情吗？我正在尝试类似的事情，我想知道你是否可以强制浏览器以可预测的方式缓存视频。如果你能分享任何经验，我会非常感激... - Dmitry Pashkevich

Answer 1

你可以通过在JavaScript中创建一个<img>标签并设置其src属性来预加载浏览器中的图像。虽然这不是任何规范所要求的，但所有浏览器都会下载并缓存该图像（假设它们的缓存没有被禁用）。

我不知道这是否适用于HTML5中的<video>元素，但可以尝试一下。

- Paul D. Waite

---

我应该解释一下，所讨论的视频元素基本上是整个页面。我想我需要一种方法来告诉浏览器获取一组文件并将它们缓存，直到逐个加载到视频元素中的时间到了。而且我需要使用JavaScript实现，因为所需文件根据用户输入而变化。 - S P

@Sergio1132：啊，所以浏览器似乎没有缓存视频文件。在这种情况下，我认为你需要改变你的方法——创建额外的<video>元素，然后交换它们，而不是只使用一个<video>元素。 - Paul D. Waite

谢谢，最终我做了类似这样的事情。我使用多个隐藏的<video>元素和一个<canvas>元素。将<video>帧绘制到<canvas>上，当剪辑结束时，脚本会简单地更改正在绘制到画布上的<video>元素。 - S P

@Paul D. Waite：对于在视频之间切换，我认为没有优势，但是该网站将具有覆盖在视频上的最小文本界面，我认为将整个界面作为<canvas>元素可能会使其能够做一些有趣的事情。现在，我们只是使用CSS定位将界面放在视频上方，但我想如果我们将界面与视频一起绘制到画布上，那么就可以使用各种<canvas>方法使界面与其下方的视频进行微妙的交互。 - S P

@Sergio1132：啊，我明白了，太棒了。值得一些实验。 - Paul D. Waite

Answer 2

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

我的方法是：使用单个<canvas>元素和多个隐藏的<video>元素，并使用canvas drawImage()函数来显示和淡入淡出视频。

- Christopher Hall