直接修改video的src属性并调用load()方法可动态切换视频源，推荐使用source标签灵活控制多格式兼容，需注意自动播放限制与跨域问题。
在网页开发中，有时需要根据用户操作或程序逻辑动态更换视频内容。JavaScript 提供了简单有效的方式来修改 HTML5 元素的 src 属性，从而实现视频源的动态切换。下面介绍几种常用且可靠的方法。
直接修改 video 的 src 属性
最直接的方式是通过 JavaScript 获取 元素，并更新其 src 属性。浏览器会自动加载新源并准备播放。
const video = document.getElementById('myVideo');
video.src = 'new-video.mp4';
设置新的 src 后，建议调用 load() 方法强制重新加载资源，确保更改生效。
video.load();
使用 innerHTML 动态替换 video 标签（适用于复杂场景）
在某些情况下，比如需要更换多个属性（如 poster、controls 等），可以通过修改父容器的 innerHTML 完全替换整个 标签。
立即学习“Java免费学习笔记（深入）”；
示例代码：
document.getElementById('videoContainer').innerHTML = `
`;
这种方式适合需要同时切换多个 source 或格式的情况，但注意会重置播放状态。
推荐做法：使用 source 标签并重新加载
为了更好地支持多格式兼容，建议使用
const video = document.getElementById('myVideo');
const source = document.createElement('source');
source.src = 'updated-video.mp4';
source.type = 'video/mp4';
// 清除旧的 source
while (video.firstChild) {
video.removeChild(video.firstChild);
}
video.appendChild(source);
video.load(); // 必须调用 load() 才能生效
video.play().catch(e => console.log('播放失败，可能因未触发用户交互', e));
注意事项与常见问题
-
必须调用 load()：修改 src 或 source 后，若不调用
load()，浏览器可能不会加载新视频。 -
自动播放限制：现代浏览器禁止未经用户交互的自动播放，调用
play()可能失败，需在按钮点击等事件中执行。 - 跨域问题：确保视频资源允许跨域访问，否则可能无法加载。
- 格式兼容性：不同浏览器支持的视频格式不同，建议提供 mp4、webm 等多种格式备用。
基本上就这些。只要掌握修改 src 或动态操作 load()，就能顺利实现视频源的动态切换。不复杂但容易忽略关键步骤。
