标签赋值并实时播放视频的完整解决方案
" />
本文详解如何在 JavaScript 中动态设置 <video> 元素的视频源并确保其正确加载与播放，重点解决仅修改 src 属性后视频不显示的问题。
本文详解如何在 javascript 中动态设置 `
在 Web 开发中，动态更新 <video> 标签的视频源（如用户点击不同按钮切换视频）是一个常见需求。但与 <img> 标签不同，仅修改 <source> 的 src 属性并不会自动触发视频加载和渲染——这是许多开发者踩坑的关键点。
原因在于：<video> 是一个具有复杂媒体生命周期的元素。浏览器不会像处理图像那样监听 <source> 的属性变更并自动重载；它需要显式调用 load() 方法来重新解析子 <source> 元素、选择合适格式、建立媒体资源连接，并准备播放。
✅ 正确做法如下：
<video id="the-video" width="320" height="240" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 使用原生 JS（推荐，无需 jQuery）
const video = document.getElementById('the-video');
const source = video.querySelector('source');
source.src = 'the-video-url.mp4';
video.load(); // ? 关键：强制重新加载媒体资源
// 可选：自动播放（需满足浏览器自动播放策略，如静音或用户交互后）
// video.play().catch(e => console.warn("Autoplay prevented:", e));
</script>⚠️ 注意事项：
- 若使用 jQuery，请确保调用 .load() 作用于 <video> 元素本身（而非 <source>），例如：$('#the-video').load()；
- 修改 source.src 后必须调用 video.load()，否则视频仍处于“空闲”或“错误”状态；
- 若需兼容多格式（如 MP4 + WebM），建议同时更新所有 <source> 元素的 src，再调用 load()；
- 调用 play() 前建议监听 canplay 或 loadeddata 事件，确保媒体已就绪；
- 现代浏览器对自动播放有严格限制（尤其含音频视频），如需静音自动播放，可添加 muted autoplay 属性并确保 video.muted = true。
? 小结：<video> 不是“被动响应型”元素，它是“主动控制型”媒体接口。动态更换视频时，load() 是不可或缺的桥梁——它告诉浏览器：“请重新解析源、加载元数据、准备播放”，缺此一步，视频将永远停留在空白或占位符状态。
