如何解决JavaScript每分钟重载视频时的缓存阻碍问题？

你的问题核心在于：浏览器会缓存相同URL的资源，即使服务器上的文件已经更新，只要URL不变，浏览器就会直接用缓存里的旧文件。另外原代码用setTimeout只会执行一次刷新，没法实现每分钟重复更新。

这里给你几个可行的解决办法：

1. 给视频URL追加唯一时间戳（核心解决方案） #

每次刷新视频时，在原URL后面加上一个基于当前时间的参数（比如?t=时间戳），让浏览器认为这是一个全新的资源，从而绕过缓存请求服务器上的最新文件。同时把setTimeout换成setInterval，实现每分钟重复执行。

修改后的代码：

const video = document.querySelector("video");
// 提取不带参数的原始视频URL
const baseVideoUrl = video.src.split('?')[0];

// 每分钟执行一次刷新
setInterval(() => {
  // 生成带时间戳的新URL
  const freshVideoUrl = `${baseVideoUrl}?t=${Date.now()}`;
  video.setAttribute('src', freshVideoUrl);
  video.load();
  // 如果需要自动播放，可加上下面一行（注意处理浏览器自动播放限制）
  // video.play().catch(err => console.error('播放失败:', err));
}, 60000);

2. 强化服务器端缓存控制（推荐配合使用） #

你添加的<meta>缓存标签优先级较低，建议直接在服务器端给MP4文件配置严格的缓存响应头，从根源上阻止浏览器缓存视频：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

不同服务器的配置方式不同（比如Nginx、Apache），根据你的服务器环境调整即可。

3. 可选：优化视频加载体验 #

如果需要确保视频加载完成后再显示，可以监听视频的加载事件：

video.addEventListener('loadeddata', () => {
  console.log('最新视频已加载完成');
  // 这里可以添加加载完成后的逻辑，比如显示播放按钮等
});

内容的提问来源于stack exchange，提问作者Stjepko Jančijev