开箱网页

拖拽进度条的开箱网页时候，浏览器其实在干一件挺离谱的开箱网页事。你点一下视频，开箱网页它不会把整个文件下载完再播，开箱网页而是开箱网页先抓一小段，够用就行。开箱网页这个“够用就行”的开箱网页判断，背后藏着一整套HTTP Range请求机制。开箱网页我第一次用Chrome开发者工具看视频加载的开箱网页时候，盯着Network面板里那些206状态码看了半天——服务器只返回了文件的开箱网页一小部分，剩下的开箱网页等你拖到那儿再说。

这就是开箱网页流媒体的核心逻辑。不是开箱网页“下载”，是开箱网页“取用”。

拿YouTube举例。开箱网页你打开一个十分钟的视频，浏览器不会乖乖等十分钟的缓冲。它先请求开头几秒，通常是前几十KB的元数据加上一小段视频数据。服务器返回206 Partial Content，附带Content-Range头，告诉你“这是第0到第1023字节，总共大概50MB”。浏览器拿到这段数据，解码器开始工作，画面出来了。与此同时，后台在继续请求后面的片段，但优先级很低，你甚至感觉不到。

拖动进度条到中间某个位置，浏览器会发一个新的Range请求，Range: bytes=25000000-，意思是从25MB开始给我。服务器如果支持断点续传，就返回206；如果不支持，就只能返回200，把整个文件重传一遍。后者在老旧服务器上很常见，你拖动的时候卡一下，多半就是这个原因。

有个细节挺有意思：很多视频网站的进度条不是均匀的。你仔细看Netflix的进度条，某些区间的缩略图加载特别快，某些特别慢。因为视频编码用了关键帧（I-frame）和预测帧（P-frame）。关键帧是完整的画面，预测帧只存变化部分。浏览器拖动到某个时间点，必须找到最近的关键帧才能解码。如果那个关键帧离你拖的位置很远，就得往前多找一段数据。所以进度条上的“卡顿点”，往往对应着关键帧稀疏的区域。

音频也类似，但更隐蔽。你听播客的时候，拖动进度条几乎瞬间响应，因为音频码率低，几秒钟的数据也就几十KB。视频码率高得多，1080p一秒钟可能就几百KB，拖动的代价自然大。

再说一个我实际遇到的情况。之前用某个小众视频网站，拖动进度条总是失败，控制台报ERR_CONTENT_LENGTH_MISMATCH。查了半天，发现服务器返回的Content-Length和实际发送的字节数对不上。原因很蠢：后端用了gzip压缩，但没更新Content-Length头。浏览器收到206响应，按声明的长度去读，读到最后发现少了几个字节，直接报错。这种问题在大厂很少见，但小团队经常踩坑。

还有跨域的问题。如果视频文件和网页不在同一个域名下，服务器必须返回Access-Control-Allow-Origin头，否则浏览器会拦截Range请求。有些CDN默认不返回这个头，你得手动配置。我见过一个案例，视频在阿里云OSS上，网页在另一个域名，死活播不了。最后发现是OSS的CORS规则里没允许Range头。

浏览器这边其实很宽容。你发一个Range请求，服务器不理你，返回200全量数据，浏览器也能播，只是浪费带宽。但反过来，服务器返回206，浏览器却当200处理，就会出问题。这种兼容性坑，在移动端浏览器上尤其多。Android的WebView和iOS的Safari对Range请求的处理就有差异，前者有时候会忽略Content-Range头，后者对If-Range的支持更严格。

说到底，开箱网页这件事，表面看是前端在控制播放器，底层全是HTTP协议在撑。你拖一下进度条，背后是Range请求、206响应、关键帧定位、CORS校验、CDN缓存策略这一整套东西在跑。任何一个环节掉链子，用户看到的就是转圈圈。

下次视频卡住的时候，别急着重启路由器。打开开发者工具，看看Network面板里那个206请求的响应头，说不定能找到真正的原因。