google-chrome - Chrome 和 Safari 不缓存大视频

Question

我正在托管一个提供 HTML 视频的网站。我的服务器的视频响应包含标题 cache-control: public, max-age=31536000, immutable .一切都在 Firefox 上运行，但在 Chrome 和 Safari 上，我没有看到我期望的缓存结果。

我的 JavaScript (Angular) 以随机时间间隔将视频搜索到随机位置。我面临两个相关但截然不同的问题:

Chrome 和 Safari 请求视频范围 每次视频寻求，即使它已经请求该范围。这意味着如果我让浏览器保持打开状态，它会 永远不要停止提出请求 .

Chrome 和 Safari 不会在页面加载之间缓存视频。

我怀疑问题出在视频的大小 (170 MB) 上，因此我将其替换为较小的视频 (9 MB) 以进行测试。较短的视频不会遇到较长的视频所遇到的任何问题:

如果视频没有缓存。 Chrome 和 Safari 仅制作 一 要求。他们不会对每次搜索都提出新的请求。

在第一次请求之后，Chrome 和 Safari 会缓存视频以用于新的视频请求。

两个视频的请求/响应头是一样的，所有的响应都有206状态。我能发现的唯一显着区别是较小的视频通常只需要 1 个请求即可下载，而较大的视频则需要多个请求。

为什么我无法缓存更大的视频？我该如何解决？

Answer 1

正如您提到的，您正在发送 206部分内容的状态代码以及 age header ，但这还不是全部。
方法一
您必须发送 Content-Range header 可以表示正在为媒体下载的内容范围以帮助浏览器。此外，浏览器有一个缓存限制，它会在出现新内容时自动修剪旧的/过时的内容。您可以仔细阅读here ,
方法二
此外，如果标题策略不起作用，您可以随时尝试 service-worker为特定媒体内容缓存和构建您自己的缓存桶和缓存策略，您可以阅读有关此内容的更多信息 here .

I hope while testing caching, you're not "Disabling Cache" in Dev-tools and also verify the correct request and response headers from server logs instead of browser for validating caching.

希望能帮到你。