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

【问题标题】：Safari not retrieving mp4 video from cache, and sometimes timeout when downloading the same resourceSafari 不从缓存中检索 mp4 视频，下载相同资源时有时会超时
【发布时间】：2019-09-19 05:46:23
【问题描述】：

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

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

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

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

【问题讨论】：

标签： vue.js caching video safari mp4

【解决方案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);
});

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

这里有一个codepen demo，可以在 Safari 桌面/移动设备中进行测试（当不处于私人模式时）。

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

缺点：在下载完整数据之前，您无法开始播放视频。这就是为什么此解决方案只能用于小视频（例如

【讨论】：