背景：
我们需要在网页中播放一个视频文件，视频文件是由服务端返回的流式文件，乍一看这个需求没什么难度，按照正常的操作，使用 video 标签 src 为返回视频内容的请求地址就能做到，但实际并非像预期那样的顺利，遇到了一个很奇妙的问题，在Chrome浏览器中出现了无法控制视频播放进度的问题，进度条竟然拖动失效了。
过程：
由于之前遇到过不同浏览器有不同的表现的情况，所以第一反应是看在其他浏览器是否也存在同样的问题，决定在Firefox中验证一下，然而在Firefox中，一切正常，视频会根据进度条的拖动播放对应的内容，这样看来当前问题应该是Chrome浏览器的一个兼容性问题。
查阅了一些资料后得知，Chrome和Firefox在处理视频文件时采用了不同的策略，在Chrome中，视频文件通常会被分段下载，这是因为Chrome使用了一个称为Range Requests（范围请求，是一种 HTTP 请求头，它允许客户端请求服务器返回文件的特定范围）的功能来对大文件进行分段下载。通过使用 Range Requests，Chrome 可以将大文件拆分成多个部分，每个部分都可以独立下载，这可以提高下载速度和性能。
在浏览器请求视频文件时，如果支持流式传输（即视频格式支持分段下载和播放），通常会在请求头中自动添加 Range 字段，以便从服务器请求视频文件的特定部分。
request.png
于此同时服务端也需要对Range进行响应，即需要添加响应头Content-Range、 Accept-Ranges和Content-Length以便正确处理视频文件的范围请求和拖动进度条功能。
-
Content-Range用于指定响应主体在整个资源中的范围 -
Accept-Ranges用于指示服务器是否支持分段下载功能 -
Content-Length用于表示响应主体的大小，即视频文件的大小，以字节为单位
因此我查看了请求的响应头，发现并没有Content-Range、Accept-Ranges字段，所以这就是问题所在。
response.png
在与后端童鞋沟通后，加上缺少的字段，一切就正常了，下面是正确的响应头。
正确的响应头.png
