是否可以在不将其添加到DOM的情况下预加载和缓存视频文件

Is it possible to preload and cache video files without adding them to the DOM?

本文关键字：情况下 加载 文件 视频 缓存 DOM 添加 是否      更新时间：2023-09-26

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

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

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

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

我以为一旦文件被下载，

它们就会留在浏览器缓存中，一旦我尝试使用相同的 src 加载文件，它就会从下载的资产池中提取它，但事实似乎并非如此......

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

谢谢！

德国

可以尝试使用 Blob 和对象 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);
相关文章：