点击列表项触发视频切换的核心是监听点击事件，获取视频地址赋值给的src，再调用load()和play()；必须同步执行play()、添加preload="metadata"、用onloadeddata时机高亮当前项，并捕获play() Promise异常。
点击列表项时如何触发视频切换？
核心是监听列表元素的点击事件，拿到对应视频地址后赋值给 <video></video> 标签的 src 属性，再调用 load() 和 play()。不调用 load() 容易出现“切换后黑屏但有声音”或“仍播上一个视频”的问题。
- 列表项建议用
<button></button>或带data-src属性的<li>，避免用纯文本<div> 导致语义不清和键盘不可访问 <li>切换前先调用 <code>videoEl.pause()，否则多个视频可能同时加载音频流 - 若视频格式不一致（如 MP4 + WebM），需同步更新
type属性或清空<source></source>后重新 append - 移除之前所有列表项的
active类，再给当前项添加——别只加不删，否则高亮会累积 - 如果列表是动态渲染（如 JS 拼接字符串），确保每次更新都重新绑定事件，或用事件委托绑定到父容器
- 不要依赖
videoEl.currentTime === 0判断是否为新视频，有些浏览器会缓存首帧，导致误判 - 给
<video></video>加preload="metadata"，比auto更轻量，能加快尺寸/时长读取 - 对常用列表项（如前 3 个），可在页面加载后用
fetch(videoUrl, { method: 'HEAD' })触发 DNS 预解析和连接复用 - 避免在
onclick里直接写video.src = url; video.play()，缺少错误捕获；应包裹try/catch并监听onerror显示 fallback 提示 - 确保
play()在原生点击事件回调的同步执行路径内，比如button.addEventListener('click', () => { video.src = x; video.load(); video.play(); }) - 不要把
play()挪到onloadeddata里——这个事件是异步的，iOS 会拒绝播放 - 如果用了 Vue/React 等框架，注意事件绑定是否经过中间层包装，某些封装会把原生事件转成合成事件，导致 iOS 识别失败
- 加上
playsinline和webkit-playsinline属性，否则 iOS 会全屏弹出播放器
怎么让当前播放项在列表中高亮显示？
靠 CSS 类控制视觉反馈，但关键在于「类名添加时机」：必须等 load() 成功后再加，否则可能刚点完就高亮，结果视频因网络失败没切过去。可用 videoEl.onloadeddata 作为可靠钩子。
切换时卡顿或加载慢怎么办？
本质是视频资源未预加载。浏览器默认对非自动播放的 <video></video> 不预加载元数据，所以首次点击要等整个视频头下载完才能播放。解决方向是提前 fetch 元数据，但得权衡带宽和首屏性能。
移动端点击没反应？常见兼容性坑有哪些？
iOS Safari 和部分安卓 WebView 要求视频播放必须由用户手势直接触发，且不能在异步回调（如 setTimeout、Promise.then）里调用 play()。这是最常被忽略的硬性限制。
立即学习“前端免费学习笔记（深入）”；
video.play() 的 Promise 返回值经常被忽略——它可能 reject，而你不会看到任何报错，除非显式 catch。这点在调试无响应时特别容易卡住。
