Safari 不从缓存中检索 mp4 视频，有时在下载相同资源时超时

Question

我是运行一个显示全屏视频故事的 VueJS 应用程序。我在故事中创建的标签数量没有媒体数量多：我只是在每次播放新视频时更改分量视频源。

但看起来 Safari（桌面和移动）在加载后仍然不缓存 HTML 视频：当我再次播放以前的媒体时，Safari 正在再次下载资产。而不是像 Chrome 那样从缓存中获取。已经报告了同样的问题 here 但仍然没有正确答案。

当我们在故事中快速来回切换时，Safari 甚至会停止下载最终字节视频（产生某种超时），因此故事看起来卡住了。这是一个示例 link.

有谁知道一个好的替代方法可以避免每次在 Safari 上播放时重新下载视频数据？

Answer 1

部分解

我自己找到了一个解决方法，如果视频很小，它会非常有效 - 在我的案例中，所有视频都小于 3Mb。

诀窍是使用 js fetch API 下载完整视频，然后将其流式传输到视频标签中。

const videoRequest = fetch("/path/to/video.mp4")
    .then(response => response.blob());

videoRequest.then(blob => {
    video.src = window.URL.createObjectURL(blob);
});

与视频 src 属性相反，fetch API 将从缓存中获取视频数据，如果之前已经获取了相同的视频。

这里有一个 codepen demo 可以在 Safari desktop/mobile 中测试（当不在私人模式下时）。

专业版：视频现在从 Safari 的缓存中提取！

Con ：在下载完整数据之前，您无法开始播放视频。这就是为什么此解决方案只能用于小视频（如 < 5Mb）的原因，否则您的用户可能需要等待一段时间才能播放视频。

Safari 不从缓存中检索 mp4 视频，有时在下载相同资源时超时

Safari not retrieving mp4 video from cache, and sometimes timeout when downloading the same resource

safari

video

mp4

caching

vue.js