HTML5中仅替换<source>标签不会触发重加载，因浏览器首次加载后不再监听DOM变化；必须调用mediaElement.load()强制重新解析资源。
HTML5 中 <source> 标签本身不触发自动刷新或重加载；动态替换 <source> 后，必须显式调用媒体元素的 load() 方法，才能让浏览器重新解析并加载新资源。
为什么仅替换 source 不生效
浏览器在 <video> 或 <audio> 元素首次加载时解析其子 <source>，之后不会监听 DOM 变化。即使你用 JavaScript 替换了 src 属性或整个 <source> 节点，播放器仍维持原有加载状态（如已加载、暂停、出错等），不会自动响应。
常见误操作包括：
- 只修改
source.src但未调用load() - 用
innerHTML重写<source>列表却忽略后续控制 - 在播放中直接替换，未先
pause()或load()，导致行为不可预测
正确替换并刷新的三步操作
要确保新资源被加载并可播放，需按顺序执行：
立即学习“前端免费学习笔记（深入）”；
-
清空当前播放状态：调用
mediaElement.pause()（如有正在播放） -
更新 source 或 src：替换
<source>的src属性，或清空后追加新<source>节点 -
强制重新加载：调用
mediaElement.load()—— 这是关键一步，它重置加载状态并触发新的资源解析与获取
示例代码：
<video id="myVideo" controls><source id="videoSource" src="old.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
const source = document.getElementById('videoSource');
source.src = 'new.mp4';
video.load(); // 必须调用
// video.play(); // 如需自动播放，再调用 play()
</script>
兼容性与边界注意事项
不同浏览器对 load() 的响应略有差异，尤其在移动端或特定格式下：
- 若新
src为 blob URL 或 data URL，需确保其生命周期有效（例如 blob 未被 revoke） - 部分 iOS Safari 在
load()后可能仍拒绝自动播放，需用户手势触发play() - 替换后立即
play()可能报错（如NotAllowedError），建议监听loadeddata或canplay事件后再播放 - 若原资源已出错（
error事件触发），替换前可先检查mediaElement.error并调用load()清除错误状态
替代方案：直接操作 media 元素的 src 属性
对单源场景，跳过 <source>、直接设置 mediaElement.src 更简洁：
- 赋值新 URL 后仍需调用
load()（不能只靠src = ...） - 优势是无需维护
<source>DOM 节点，减少操作步骤 - 缺点是失去多格式回退能力（如同时提供 webm + mp4）
例如：video.src = 'new.mp4'; video.load();
