用标签实现多视频手动切换时，最轻量方式是直接替换src并监听loadedmetadata后再play()；推荐预加载所有视频并控制显隐而非反复替换src；自动播放需同时设muted和autoplay，iOS要求用户手势紧邻play()调用。
怎么用
直接替换 src 属性是最轻量的做法，适合 2–5 个视频、无动画需求的场景。浏览器会自动释放前一个视频的解码资源，但要注意触发 load() 和 play() 的时机。
常见错误是改完 src 立即调 play()，结果报错 DOMException: The element has no supported sources —— 因为还没加载元数据。
- 先设
video.src = newUrl - 监听
loadedmetadata事件，再调video.play() - 切换前可加
video.pause()+video.currentTime = 0避免残留播放状态
用 JavaScript 控制轮播时，为什么视频会卡顿或黑屏
本质是频繁销毁/重建 元素或反复调 load() 导致解码器重初始化。Chrome 和 Safari 对连续 load() 有节流，Firefox 更敏感。
推荐方案：预先加载所有视频的 preload="metadata"，用 display: none 隐藏非当前视频，只控制显隐和播放状态，而非反复替换 src。
立即学习“前端免费学习笔记（深入）”；
- 每个
单独写在 DOM 中，初始设style="display:none" - 切换时：上一个
pause()+currentTime = 0，下一个style.display = "block"+play() - 避免用
visibility: hidden，它仍会触发解码和渲染，浪费 CPU
autoplay 和 muted 在轮播中必须同时出现吗
是的。现代浏览器（Chrome 66+、Safari 11+、Edge 79+）对自动播放有严格限制：只有静音视频才能在页面加载后自动播放。哪怕轮播逻辑由用户点击触发，首次 play() 若未静音且无用户手势，也会被拒绝。
- 轮播初始化时，给所有
加muted和autoplay属性 - 若需带声播放，只能等用户真实点击（如“播放声音”按钮）后再调
video.muted = false，然后play() - 注意：iOS Safari 不允许 JS 解除静音，必须由用户手势直接触发
play()且含muted=false
用 IntersectionObserver 做懒加载轮播要注意什么
当轮播区域滚动进视口才加载视频，能显著减少首屏资源压力，但容易误判“可见性”。IntersectionObserver 默认只检测元素是否在视口内，而 的 preload 行为受其父容器影响。
- 确保轮播容器本身不设
overflow: hidden或transform，否则可能干扰 observer 判定 - 观察阈值设为
0.1（10% 可见即触发），避免视频刚露头就加载失败 - 加载后立即调
video.load()，但不要立刻play()；等canplay事件再加入轮播队列
play() 调用，差一行代码都可能静音失败。 
