如何在不刷新页面时重新加载服务器上替换的同名视频文件？

这个问题的核心其实是浏览器缓存机制在搞鬼——浏览器会根据请求的URL缓存静态资源，当你替换了磁盘上的Intro.mp4但文件名不变时，浏览器会直接读取本地缓存的旧视频，不管服务器上的文件已经更新了。这也是为什么刷新页面时Opera没更新（缓存没失效）、Edge却可以（可能Edge的缓存策略更激进或者自动验证了资源），而直接调用$("#myVideo").load()没用，因为这个方法并没有强制浏览器重新请求视频资源。

下面是具体的解决方案，不需要刷新页面就能让视频加载新的文件：

方法：给视频URL添加随机参数绕过缓存 #

我们可以通过在视频的src后面追加一个随机的查询参数（比如时间戳、随机数），让浏览器认为这是一个全新的资源，从而重新请求服务器上的最新文件。

结合你的示例代码，具体实现如下：

1. jQuery版本（和你现有代码风格一致）

// 获取source元素
var $source = $("#source");
// 保存原URL（去掉可能已存在的参数）
var originalSrc = $source.attr("src").split("?")[0];
// 生成新的URL，追加时间戳作为参数
var newSrc = originalSrc + "?t=" + new Date().getTime();
// 更新source的src
$source.attr("src", newSrc);
// 让视频元素重新加载并播放（可选，根据需求调整）
var video = $("#myVideo")[0];
video.load();
video.play();

2. 原生JavaScript版本（如果不想依赖jQuery）

const source = document.getElementById("source");
const video = document.getElementById("myVideo");
// 移除旧参数，获取纯净的原URL
const originalSrc = source.src.split("?")[0];
// 追加时间戳参数
source.src = originalSrc + "?t=" + Date.now();
// 重新加载视频
video.load();
// 可选：自动播放
video.play();

为什么这个方法有效？ #

浏览器判断资源是否需要缓存的依据是完整的请求URL，当我们给src加上?t=xxxxxx这样的动态参数后，每次请求的URL都不一样，浏览器会认为这是一个新的资源，就会去服务器请求最新的Intro.mp4文件，而不是读取本地缓存。

额外注意事项 #

• 如果你的服务器配置了强缓存策略（比如设置了很长的Cache-Control），这个方法依然有效，因为参数改变了URL，会绕过缓存。
• 如果你不需要自动播放，可以去掉video.play()这一行，让用户手动点击播放按钮。

内容的提问来源于stack exchange，提问作者Влад Ого