启用缓存时，HTML5 视频永远不会完成加载（在 Chrome 中）答案

【问题标题】：HTML5 video never finishes loading when cache is enabled (in Chrome)启用缓存时，HTML5 视频永远不会完成加载（在 Chrome 中）
【发布时间】：2017-06-12 14:57:09
【问题描述】：

我的网站上有一个简单的视频，仅此而已：

<video poster="...">
  <source src="some/path/to/file.mp4" type="video/mp4">
</video>

当我在开发工具打开并选中“禁用缓存”复选框时尝试加载视频时，会发生以下情况：

视频播放正常。

但是当未选中“禁用缓存”复选框时，我看到了：

只需“加载启动”，仅此而已，视频将永远停留在此状态。

多次尝试，我可以肯定地说，缓存状态是唯一有所作为的因素。在 Firefox 中，相应的选项无效，两种情况下都可以正常播放视频。

以下是禁用缓存的请求标头（省略 User-Agent 和 cookie）：

Host: localhost:9910
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept-Encoding: identity;q=1, *;q=0
Accept: */*
Referer: http://localhost:9910/
Accept-Language: en-US,en;q=0.8,ru;q=0.6,uk;q=0.4
Range: bytes=0-

启用缓存后，第一个请求的标头（返回 206）：

Host: localhost:9910
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
Accept: */*
Referer: http://localhost:9910/
Accept-Language: en-US,en;q=0.8,ru;q=0.6,uk;q=0.4
Range: bytes=0-

第二个请求（返回 200）：

Host: localhost:9910
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
Accept: */*
Referer: http://localhost:9910/
Accept-Language: en-US,en;q=0.8,ru;q=0.6,uk;q=0.4
Range: bytes=360448-393474
If-Range: Mon, 12 Jun 2017 13:07:36 GMT

除了第一种情况下明显的Pragma: no-cache 和Cache-Control: no-cache 之外，很容易看出在第三种情况下Range 标头的值不同，并且还添加了If-Range 标头。我读了about it，但我仍然不明白到底发生了什么：对这个第三次请求的响应包含last-modified: Mon, 12 Jun 2017 13:07:36 GMT——等于If-Range值，所以，如果我理解正确，资源应该被认为是不变的，并且按照规范 206，应返回部分数据。

我不擅长所有这些标题内容，所以我的问题是：

为什么会出现这个带有If-Range 的请求？
为什么尽管所有请求都成功，但视频仍未完成加载？
到底应该怎么做才能播放视频呢？我应该在前端以某种不同的方式请求它，还是服务器设置的问题？

【问题讨论】：

如果视频在开始时使用 MOOV atom 编码（使用 ffmpeg 或 qt-fastart 等）？可能是元数据在未缓存时需要一段时间才能使用的问题

标签： google-chrome caching video html5-video

【解决方案1】：

好的，这是由服务器引起的。不知道我们的后端开发人员究竟修复了什么，但至少不是浏览器问题。

无论如何，尽管所有请求都成功，但仍然有兴趣无法加载视频。开始玩可能缺少什么？

【讨论】：