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

Question

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

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

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

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

我认为一旦文件被下载,他们只会留在浏览器缓存中,一旦我尝试加载具有相同src的文件,它就会从下载的资产池中提取它,但这似乎不是是这样的......

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

谢谢!

GER

Answer 1

您可以尝试使用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);