视频 src 不更新需用 videoel.src = newurl; videoel.load(); videoel.play(); 多源用对象映射，注意格式兼容、预加载策略及按钮状态同步。
点击按钮后视频 src 不更新？先检查是否用了 setAttribute 而非直接赋值
浏览器对 <video></video> 元素的 src 属性更新有特殊要求：仅调用 element.setAttribute('src', url) 通常不会触发重新加载，必须配合 load() 方法。常见错误是只改属性就以为完事了。
- 正确做法：
videoEl.src = newUrl; videoEl.load(); videoEl.play(); - 如果之前调用过
play()且被暂停，load()会重置播放状态（包括 currentTime 归零） - 若想保留当前时间点，需在
load()前记录currentTime，加载后再设回（但部分格式不支持精确跳转）
多个视频源怎么组织？用对象映射比数组更易维护
把视频 URL 和按钮文案配对存成对象，比用两个平行数组更安全——避免下标错位、增删时漏同步。键名可直接对应按钮的 data-src-key，解耦 HTML 和 JS 数据结构。
const videoSources = {
'intro': 'https://example.com/intro.mp4',
'demo': 'https://example.com/demo.webm',
'tutorial': 'https://example.com/tutorial.mp4'
};
- 按钮写成：
<button data-src-key="demo">演示视频</button> - JS 中通过
btn.dataset.srcKey拿到键，再查表获取 URL - 支持动态增删源：只需改对象，不用动 DOM 或 JS 逻辑
切换时卡顿或黑屏？注意格式兼容性和预加载策略
不同浏览器对视频编码（H.264 / VP9 / AV1）和容器（MP4 / WebM）支持不一。单纯换 src 可能触发完整加载，造成等待。实际体验差往往不是代码问题，而是资源本身。
- 确保每个视频都提供至少 MP4（Safari/IE）和 WebM（Firefox/Chrome）双格式，用
<source></source>标签而非单个src - 不想等加载完成再播放？可对非当前源提前调用
preload="metadata"，但别设preload="auto"（浪费带宽） - 移动端 Safari 默认禁止自动播放带声音的视频，切换后调用
play()可能被拒绝，需捕获Promisereject 并提示用户手动触发
按钮状态同步怎么做？避免“点了没反应”的错觉
用户点击按钮后，如果界面没反馈（比如高亮当前选中项），容易反复点击。DOM 状态和 JS 状态不同步是常见疏忽。
- 给所有按钮加统一 class（如
video-btn），切换时先移除全部的active，再给当前按钮加 - 不要只靠 JS 记录当前 key，每次切换后同步更新
data-active属性，方便 CSS 或后续逻辑读取 - 如果按钮是生成的（比如从数组渲染），确保事件监听绑定在父容器上，用事件委托，避免重复绑定
真实场景里，视频格式差异、网络延迟、移动端 autoplay 限制这三点最容易被忽略，调试时优先查这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
