HTML5视频禁止缓存设置方法

本文深入解析了HTML5视频标签无法禁用缓存的根本原因——浏览器对video的缓存行为完全由服务端返回的HTTP响应头控制，而非HTML属性或前端参数；文章系统梳理了Node.js/Express和Nginx两大主流环境下的精准配置方案，强调必须同时设置Cache-Control: no-store、移除ETag、禁用Last-Modified并配合expires -1等硬性措施，还补充了iOS Safari等特殊场景下前端需调用video.load()强制刷新的实战技巧，帮助开发者彻底摆脱“加了no-cache仍缓存”的常见陷阱。

为什么 video 标签加 cache-control: no-cache 没用

浏览器对 的缓存行为不由 HTML 属性控制，而是由服务器返回的 HTTP 响应头决定。即使你在 HTML 里写 ，只要服务端响应头带 Cache-Control: public, max-age=3600，浏览器仍会缓存。关键在服务端配置，不是前端加参数或属性。

Node.js/Express 中禁用视频缓存的正确写法

在提供视频文件的路由中，必须显式设置响应头，并确保不被后续中间件覆盖。常见错误是只设了 Cache-Control 却漏掉 ETag 和 Last-Modified——这两个字段一旦存在，浏览器可能仍发起条件请求（304 Not Modified），导致“看似没重载实则用了缓存”。

• 务必移除 ETag：用 res.removeHeader('ETag')
• 禁用协商缓存：设 res.set('Cache-Control', 'no-store, must-revalidate')
• 避免时间戳欺骗：不要依赖客户端传的 ?t=xxx 参数，它无法阻止服务端返回可缓存响应头

app.get('/video/:id', (req, res) => {
  const filePath = path.join(__dirname, 'videos', req.params.id);
  res.removeHeader('ETag');
  res.set({
    'Cache-Control': 'no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  });
  res.sendFile(filePath);
});

Nginx 配置视频路径禁用缓存

如果视频走静态文件服务（比如 Nginx 直接 serve /videos/），需在 location 块中覆盖默认缓存策略。注意：不能只写 add_header，必须配合 expires 和 etag off，否则 add_header 可能被忽略或与内置逻辑冲突。

• expires -1 表示立即过期（比 0 更可靠）
• etag off 强制关闭 ETag 生成
• 避免使用 if ($request_filename ~* \.mp4$) 做条件判断——Nginx 的 if 在 location 内不可靠

location /videos/ {
  alias /var/www/static/videos/;
  expires -1;
  add_header Cache-Control "no-store, must-revalidate, max-age=0";
  etag off;
}

前端 fallback：强制刷新 src 并清除 MediaElement 缓存

即便服务端配置正确，某些浏览器（尤其是 iOS Safari）对 的 src 切换有内部缓冲机制。单纯改 src 值（如加时间戳）不够，还需调用 load() 并监听 canplay，否则可能复用旧解码器状态。

• 改 src 后必须调用 video.load()，不能只靠 DOM 更新
• 避免重复调用 load() 导致卡顿；可在 onstalled 或 onerror 时再触发
• 移动端注意：iOS Safari 不支持 URL.createObjectURL(new Blob(...)) 动态生成视频 URL 后直接播放，会静音或失败

const video = document.getElementById('myVideo');
video.src = '/video/clip.mp4?t=' + Date.now();
video.load(); // 必须显式调用
video.addEventListener('canplay', () => {
  video.play();
}, { once: true });

服务端响应头才是决定性因素，前端加参数只是辅助手段；no-store 比 no-cache 更彻底，而 etag off 和 expires -1 是容易被忽略的硬性配套操作。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~