在 EmberJS 中预加载视频内容

Question

我正在构建一个 EmberJS 应用程序，它实际上是一个幻灯片，幻灯片是图像或视频。

我发现，在加载每张幻灯片时，从服务器加载图像或视频时会有短暂的延迟。

为了阻止这种延迟，我在我的应用程序控制器中添加了一个函数，该函数从我的模型中提取图像 url 列表，然后在它们上调用 images.forEach(i => { (new Image()).src = i });。这导致幻灯片几乎立即呈现，因为图像现在从缓存中加载。

我想知道是否可以使用视频 URL 列表做类似的事情？我能找到的关于预加载的唯一信息涉及向视频标签添加 preload 属性，但这不起作用，因为在幻灯片加载之前不会呈现页面 HTML...

Answer 1

如果您真的想强制预加载整个视频（在这种特殊情况下似乎是这样做的），我建议您使用 AJAX 下载整个视频，然后从下载的 blob 构造一个 <video> 元素（假设您只支持 IE 10+）。这个过程看起来像这样：

1. 使用 AJAX 下载每个视频，这将为您提供一个代表视频文件的 blob。
2. 从适合作为<video> 元素源的blob 创建一个字符串。您可以使用URL.createObjectURL() 方法来完成此操作。
3. 创建<video> 元素并将src 设置为上述从URL.createObjectURL() 创建的字符串。