html5视频cdn分发需动静分离、差异化ttl缓存及range支持：独立域名video.example.com禁cookie，点播设max-age=1年，直播回看24小时，ugc用etag+1小时ttl；忽略跟踪参数、统一响应头、启用accept-ranges；命中率应≥92%，首帧≤500ms。
HTML5 视频资源通过 CDN 分发，核心目标是让用户在任意地域、任何设备上都能快速起播、流畅播放。要达成这个目标，不能只靠“上了 CDN”就完事，关键在于分发策略是否匹配视频特性，以及缓存是否真正被高效复用。
动静分离：视频资源必须走独立静态域名
视频文件（如 MP4、WebM）本质是静态大文件，但若和动态接口共用同一域名（如 example.com），会因 Cookie、认证头、会话参数等导致 CDN 无法缓存或缓存碎片化。实测中，混用域名常使视频缓存命中率跌破 60%。
- 为视频资源单独配置子域名，例如 video.example.com 或 cdn-videos.example.com
- 该域名不携带用户态信息（禁用 Cookie、不传 Authorization 头）
- 确保所有
<video></video>标签的src指向该独立域名
缓存策略：按视频类型设置差异化 TTL
不是所有视频都该缓存一年——缓存时间必须匹配内容更新频率与业务需求，否则要么频繁回源，要么用户看到过期内容。
-
点播类视频（课程、纪录片、广告片）：内容长期不变，建议设置
Cache-Control: public, max-age=31536000（1 年），配合文件名哈希（如video-abc123.mp4）实现强缓存 -
直播回看/时效性内容（赛事集锦、新闻剪辑）：更新周期为天级，可设
max-age=86400（24 小时） - 用户生成视频（UGC）：需支持快速更新，建议使用 ETag + If-None-Match 验证机制，TTL 设为 1 小时以内，并启用 CDN 的「智能缓存刷新」能力
CDN 配置要点：避免常见缓存失效陷阱
很多视频加载慢，问题不出在带宽，而出在缓存未生效。以下三点直接影响命中率：
-
忽略查询参数：若视频 URL 带有跟踪参数（如
?v=1.2.3&utm_source=share），需在 CDN 控制台配置「忽略指定查询参数」，只以路径为缓存键 -
统一响应头：确保源站返回一致的
Content-Type（如video/mp4）、Accept-Ranges: bytes（支持分片加载），并禁用Cache-Control: no-store等禁止缓存指令 -
启用 Range 请求支持：CDN 必须透传 HTTP Range 请求，否则无法实现拖拽、跳播；检查边缘节点返回的响应头是否含
Accept-Ranges: bytes和正确206 Partial Content
性能验证：用真实指标判断是否优化到位
不要只看“CDN 已接入”，要验证缓存是否真在工作：
- 用
curl -I https://video.example.com/xxx.mp4查看响应头：X-Cache: HIT表示命中，X-Cache: MISS表示未命中 - 对比首帧加载时间（First Frame Time）：优化后应稳定在 500ms 内（4G 网络下），卡顿率下降 70%+（参考某教育平台实测数据）
- 监控 CDN 后台的「视频类资源缓存命中率」，理想值应 ≥92%，长期低于 80% 需回溯动静分离与缓存键配置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
