在EmberJS中预加载视频内容

Question

我正在构建一个实际上是幻灯片的EmberJS应用，幻灯片可以是图片或视频。

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

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

我想知道我对视频网址列表是否有类似的功能？我能够找到的有关预加载的唯一信息包括在视频代码中添加preload属性，但这不会起作用，因为在幻灯片加载之前HTML不会被渲染...

Answer 1

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

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