是否可以预加载和缓存视频文件而不将它们添加到 DOM？

我正在开发一款游戏，根据得到的结果触发 30 个小视频文件中的一个。由于视频需要在用户交互后立即播放，因此理想情况下我希望预加载视频并准备好播放。

我添加了 PreloadJS，对我需要的所有资源进行了排队。

查看检查器中的“网络”选项卡，我可以看到加载屏幕上正在传输的所有 20mb 视频。

然而，当需要播放剪辑时，它似乎是重新下载它们而不是从内存中播放它们......

我认为一旦文件被下载，它们只会保留在浏览器缓存中，一旦我尝试加载具有相同 src 的文件，它就会从下载的资源池中提取它，但这似乎并不就这样吧……

知道如何在不向页面添加 30 个视频播放器的情况下将下载的文件保留在内存中吗？

Thanks!

Ger

您可以尝试使用 Blob 和 Object-URL 将整个文件加载到内存中。这样，未附加的视频元素可以直接通过对象 URL 播放。

对于系统资源而言，这是否是一个好的策略当然是您需要自己决定的。

• 通过 XHR 加载为blob
• 创建对象 URL：var url = (URL || webkitURL).createObjectURL(blob);

视频现在位于内存中，因此当您需要播放它时，将其设置为视频元素的源，然后您就可以开始了：

var video = document.createElement("video");
video.oncanplay = ...;  // attach to DOM, invoke play() etc.
video.src = url;        // set the object URL

对象 URL 在页面的生命周期中保存在内存中。如果需要，您可以通过以下方式手动撤销它：

(URL || webkitURL).revokeObjectURL(url);