8

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

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

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

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

我认为一旦下载了文件，它们就会留在浏览器缓存中，一旦我尝试使用相同的 src 加载文件，它就会从下载的资产池中提取它，但这似乎并没有就这样吧……

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

谢谢！

格尔

4

1 回答 1

5

您可以尝试使用 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);
于 2016-04-21T14:31:16.743 回答