是否可以预加载和缓存视频文件而无需将其添加到DOM中？

Question

我正在开发一款游戏，其中涉及触发30个小视频文件中的一个，具体取决于您获得的结果。由于视频需要在用户互动后立即播放，理想情况下我希望将视频预先加载并准备就绪。

我已经添加了PreloadJS，排队了我需要的所有资产。

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

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

我认为一旦文件被下载，它们就会停留在浏览器缓存中，一旦我尝试加载具有相同src的文件，它就会从下载资源池中提取它，但是这个似乎并非如此......

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

谢谢！

GER

Answer 1

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

如果这是一个关于系统资源的好策略，当然你需要自己决定。

• 通过XHR加载blob
• 创建对象网址：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);