Nginx优化HTML5视频背景需启用Range请求、设置长效缓存（expires 1y + immutable）、禁用视频文件的gzip/Brotli压缩、正确配置CORS响应预检请求。
HTML5视频作为背景时，Nginx的默认配置往往无法发挥最佳性能，容易出现首帧加载慢、卡顿、重复请求或跨域失败等问题。核心优化方向是：合理设置缓存策略、启用范围请求（Range）、压缩传输、避免不必要的重定向，并确保CORS兼容性。
启用并正确配置HTTP Range请求
HTML5 video 标签在拖拽、暂停后继续播放、移动端预加载等场景下严重依赖 206 Partial Content 响应。若Nginx未启用或配置不当，会导致整个视频文件被重复下载，极大影响体验。
- 确认 Nginx 已编译支持 range 模块（默认开启，无需额外加载）
- 确保视频文件所在 location 块未禁用 range：add_header Accept-Ranges bytes; 是可选的，但关键在于不设 disable_range on;（该指令极少使用且默认关闭）
- 避免在 video location 中使用 limit_rate 或 proxy_buffering off; 等可能干扰分片响应的行为
设置长效缓存 + ETag/Last-Modified 验证
视频背景文件（如 bg.mp4）通常长期不变，应强制浏览器缓存，同时保留协商缓存能力，避免 304 请求浪费带宽又不提升速度。
- 对 .mp4、.webm、.ogv 等扩展名统一配置：
- location ~* \.(mp4|webm|ogv)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Last-Modified ""; # 可选：若文件由构建流程生成且时间戳不可靠，可清空以强制依赖 ETag
} - 确保 etag on;（默认开启），Nginx 会基于文件内容自动生成强ETag，支持高效验证
启用 Brotli 或 Gzip 压缩（仅对字幕/JSON等文本资源）
视频文件本身已高度压缩，切勿对 .mp4/.webm 启用 gzip/brotli —— 这不仅无效，还增加CPU开销并可能破坏 range 请求。但配套的 .vtt 字幕、video 元数据 JSON 等文本资源必须压缩。
- 在 http 或 server 块中启用：brotli on;（推荐）或 gzip on;
- 明确指定压缩类型：brotli_types text/vtt application/json;
- 禁用对二进制媒体的压缩：brotli_disable "MSIE 6"; # 不影响视频，仅防旧IE兼容问题
处理跨域（CORS）与预检请求（Preflight）
若视频托管在独立域名（如 cdn.example.com），而页面在 app.example.com，浏览器会发起 OPTIONS 预检。需让 Nginx 正确响应，否则视频加载失败。
- 在视频 location 块中添加：
- add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
} - 注意：若需携带 Cookie，Access-Control-Allow-Origin 不能为 *，须写具体域名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
