Chrome 和 Safari 不缓存大视频

Question

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

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

1. 每次视频搜索时，Chrome 和 Safari 都会请求一个视频范围，即使它已经请求了该范围。这意味着如果我让浏览器保持打开状态，它将永远不会停止发出请求。
2. Chrome 和 Safari 不会在页面加载之间缓存视频。

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

1. 如果视频没有缓存。Chrome 和 Safari 只发出一个请求。他们不会对每次搜索都提出新的请求。
2. 第一次请求后，Chrome 和 Safari 会缓存视频以用于新的视频请求。

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

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

Answer 1

正如您提到的，您将206随 一起发送部分内容的状态代码age header，但这还不是全部。

方法一

您必须发送Content-Range标头，标头可以表示媒体正在下载的内容范围，以帮助浏览器。此外，浏览器的缓存限制会在出现新内容时自动删除旧的/过时的内容。您可以在这里仔细阅读，

方法2

另外，如果标头策略不起作用，您可以随时尝试service-worker缓存并为特定媒体内容构建自己的缓存桶和缓存策略，您可以在此处阅读有关此内容的更多信息。

我希望在测试缓存时，您不会在开发工具中“禁用缓存”，并且还从服务器日志而不是浏览器中验证正确的请求和响应标头以验证缓存。

希望对您有帮助。