调用 video.load() 方法可强制浏览器丢弃已加载媒体并重新解析源，适用于切换源、重试失败加载等场景；必须在修改 src、preload 等属性后显式调用，且需确保 dom 就绪、避免循环调用，注意 safari 不支持。
调用 video.load() 方法可以强制浏览器丢弃当前已加载的媒体资源，并重新解析、获取和初始化新的音视频源。它不是“刷新页面”，而是让 <video></video> 元素回到初始加载状态，适用于切换源、重试失败加载、重置播放逻辑等场景。
什么时候必须用 load() 方法
当以下任一操作发生后，必须显式调用 load() 才能让新设置生效：
- 修改了
<source></source>标签的src属性（如更换 MP4 或 OGG 地址） - 动态替换了
<video></video>的src属性（不推荐，但可行） - 更改了
preload、crossorigin等影响资源加载策略的属性 - 需要清除之前加载失败或中断的状态（例如网络恢复后重试）
正确调用 load() 的前提条件
调用前需确保目标元素已存在且可访问，同时推荐配合 DOM 就绪检查或事件监听：
- 确保
<video></video>和其内部<source></source>元素都已渲染完成（避免在DOMContentLoaded之前操作） - 若使用
<source></source>多格式方案，应更新所有<source></source>的src，再调用load() - 不要在
loadstart或loadeddata触发中立即再调用load()，可能引发循环或无效行为
典型代码示例（含错误规避）
以下是一个安全、可复用的切换视频并重载的写法：
<video id="myVideo" controls><source id="mp4Src" src="initial.mp4" type="video/mp4"><source id="webmSrc" src="initial.webm" type="video/webm"></source></source></video><button onclick="switchVideo('new.mp4', 'new.webm')">换视频</button>
<script>
function switchVideo(mp4Url, webmUrl) {
const video = document.getElementById("myVideo");
const mp4Src = document.getElementById("mp4Src");
const webmSrc = document.getElementById("webmSrc");
// 更新所有 source 地址
mp4Src.src = mp4Url;
webmSrc.src = webmUrl;
// 关键：先清空 currentTime，避免旧时间戳干扰
video.currentTime = 0;
// 强制重新加载
video.load();
// 可选：自动播放（需用户手势触发，否则可能被浏览器拦截）
// video.play().catch(e => console.warn("自动播放被阻止", e));
}
</script>
兼容性与注意事项
load() 在所有现代浏览器中均受支持，但有两个关键限制需注意：
-
Safari 不支持：从桌面版到 iOS Safari，该方法调用后通常无效果，建议对 Safari 单独处理（如移除并重建
<video></video>元素） - IE8 及更早版本不支持：如仍需兼容旧环境，应加 feature detection 或降级逻辑
- 调用
load()后，视频不会自动播放，也不会恢复之前播放进度——如需保留进度，应在调用前记录currentTime，并在loadedmetadata事件中恢复
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
