在HTML5网页开发中，浏览器常会缓存video标签加载的视频文件，造成视频更新后访客仍看到旧版本。要让HTML5视频不缓存，可从标签属性、请求参数与服务端响应头等方面入手。
一、通过URL随机参数避免缓存
最简单的方式是在视频地址后附加随机字符串或时间戳，使每次请求URL不同，浏览器便不会命中旧缓存。
<video controls width="640"> <source src="movie.mp4?t=1690000000000" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
二、使用JS动态设置src
用JavaScript在页面加载时给video的src加上随机参数，适合需要灵活控制的场景。
// 获取video元素
var video = document.getElementById('myVideo');
// 拼接带时间戳的地址
var url = 'movie.mp4?t=' + Date.now();
video.src = url;
video.load();
三、HTML meta标签禁止缓存
在页面head中加入如下meta声明，可告知浏览器不缓存当前页面资源，但对视频直接访问效果有限，常作为辅助手段。
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0">
四、服务端响应头设置
根本解决办法是在服务端返回视频时带上禁止缓存的响应头，例如Nginx可这样配置：
location ~ .(mp4|webm|ogg)$ {
add_header Cache-Control "no-store, no-cache, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
五、方法对比
| 方式 | 生效范围 | 维护成本 |
|---|---|---|
| URL随机参数 | 前端单次请求 | 低 |
| JS动态src | 前端可控 | 中 |
| 服务端响应头 | 全局生效 | 低 |
小结
若只是临时调试，用随机参数或JS即可；若要让所有用户都不缓存视频，务必结合服务端响应头设置。注意代码中写<video>标签时，标签名需按规则转义说明，而video.src这类术语可用code标签突出。