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

Question

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

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

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

有谁知道一个好的替代方案可以避免在 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 演示，可以在 Safari 桌面/移动设备上进行测试（当不在私人模式下时）。

优点：视频现在从 Safari 的缓存中提取！

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