为什么浏览器已缓存的视频仍会被重新下载？如何降低网页视频流量消耗

首先你当前的缓存配置无法作用于视频资源：PHP设置的是HTML页面的响应头，<meta>标签的Cache-Control也只能对当前HTML页面生效，对页面内加载的视频等外部资源没有任何效果，这是出现随机重复下载的核心原因之一，可按以下步骤修复：

• 给所有视频资源配置独立的响应头，直接在Web服务器（Nginx/Apache）中针对.mp4/.webm/.mkv等视频后缀配置响应头即可，无需通过PHP处理：

  # Nginx 配置示例
  location ~* \.(mp4|webm|flv|m4v)$ {
      add_header Cache-Control "public, max-age=31536000, immutable";
      add_header ETag $etag;
      add_header Last-Modified $date_gmt;
  }
  

  immutable属性会明确告知浏览器，只要缓存未过期无需发送任何校验请求，直接使用本地缓存，避免无意义的304请求和异常重复下载。
• 确认服务端支持Range请求：浏览器播放大体积视频时默认会发送Range分片请求，若服务端返回200状态码而非206 Partial Content，浏览器会判定资源不支持分片存储，缓存无法生效，每次播放都会重新拉取。Nginx、Apache默认已开启Range支持，若你通过PHP代理输出视频内容，需要自行实现Range请求的处理逻辑。
• 移除不必要的Vary响应头：如果视频响应头中存在Vary: Cookie/Vary: User-Agent这类配置，浏览器会认为不同请求头对应不同资源，即便内容一致也会重复下载，仅保留Vary: Accept-Encoding即可。
• 若要使用Cache Storage存储，配合Service Worker实现：主动通过Service Worker拦截所有视频请求，优先从Cache Storage中匹配资源，匹配成功直接返回无需走网络，可控性远高于浏览器默认磁盘缓存，且缓存不会被浏览器自动清理，仅会在用户主动清除站点数据或代码主动删除时失效。

• 转码压缩视频源：将原视频转码为H.265编码的MP4格式或WebM格式，同等画质下体积可降低40%-70%，直接从根源降低流量消耗。可同时生成多分辨率版本，播放时根据用户实时网速自动适配清晰度。
• 采用分片流媒体协议：将视频切分为2-10秒的小切片，使用HLS/DASH协议播放，仅加载用户当前观看位置前后的切片，用户提前退出播放时无需下载剩余内容，可减少60%以上的无效流量消耗。
• 开启视频懒加载：给video标签设置preload="none"，仅当用户点击播放按钮时才开始加载视频资源，避免页面打开时自动加载视频产生的无效流量。
• 配置视频资源限速：针对视频资源设置合理的下载速度上限，比如2Mbps码率的视频限制最高下载速度为3Mbps，避免用户一次性拉取完整视频浪费带宽，同时降低服务器压力。
• 附属资源长期缓存：视频封面、字幕、播放器静态资源等全部配置长期缓存策略，避免重复下载。

内容的提问来源于stack exchange，提问作者geo