直接替换 video 元素的 src 属性并调用 load() 和 play() 即可切换背景视频，但必须在用户交互（如 click）后触发，否则受浏览器静音策略拦截；需保留 autoplay、muted、loop、playsinline 四属性，且建议导出时移除音轨；路径须正确、格式优先 MP4（H.264+AAC），注意大小写与协议限制；移动端需适配 playsinline 和性能降级，切换后应在 loadeddata 事件中重置 currentTime = 0。
直接替换 <video> 的 src 属性就能切换背景视频
不需要重写整个 DOM 或销毁/重建 <video> 元素。只要拿到视频元素，改它的 src，再调用 load() 和 play() 即可生效。注意：必须在用户点击等交互后触发播放，否则会被浏览器静音策略拦截。
常见错误现象：play() 报错 DOMException: play() failed because the user didn't interact with the document first —— 这说明你试图在无用户操作时自动播放（比如页面加载完就切视频并播），现代浏览器禁止这种行为。
- 确保按钮绑定的是真实用户点击事件（
click），不是setTimeout或页面加载时自动触发 - 切换前先调用
video.load()，否则新src可能不生效或卡在旧帧 - 切换后立即调用
video.play()，但需用.catch(e => console.warn("play blocked:", e))捕获静音策略拒绝 - 如果想“无缝”切换，可在新视频
loadeddata事件后再play()，避免黑屏闪动
必须保留 autoplay、muted、loop、playsinline 四个属性
缺一不可。尤其是 muted：没有它，play() 在 Chrome/Firefox/Safari 上基本都会被拒；playsinline 是 iOS 设备内联播放的硬性要求，否则点按钮后视频会跳转全屏而不是安静铺满背景。
使用场景：移动端访问占比高时，漏掉 playsinline 会导致 iPhone 用户每次切换都弹出全屏控件，体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 不要用 JS 动态增删这些属性——它们得写死在 HTML 标签里，浏览器初始化时才认
-
autoplay不代表“一定会播”，只代表“允许在满足条件时播”；真正触发靠 JS 的play() - 如果视频本身带音频轨道（哪怕静音），建议导出时彻底移除音轨，比依赖
muted更稳妥
路径和格式问题最容易导致“切换了但没反应”
报错不会直接提示“文件 404”，而是表现为黑屏、控制台静默、或 onerror 触发但没打印。根源常是路径拼错或格式不兼容。
参数差异：src 必须是相对路径（如 "videos/bg2.mp4"）或绝对 URL（如 "https://cdn.example.com/bg3.mp4"），不能是 file:// 协议（本地双击打开 HTML 会失败）。
- MP4 是最稳妥格式，编码必须为 H.264 + AAC（即使静音也要有 AAC 轨，iOS Safari 强制要求）
- 避免用 WebM 或 AV1 格式作主力，尽管 Chrome 支持好，但 Safari 仍不支持 AV1 解码
- 路径区分大小写，
"Bg.mp4"和"bg.mp4"在 Linux 服务器上就是两个文件 - 可加
onerror="console.error('video load failed:', this.src)"到<video>标签快速定位 404
移动端适配要主动降级，别指望视频一直播
部分安卓低端机或 iOS 旧版本可能无法解码高分辨率视频，或因内存不足中断播放。这时候强行切视频会导致白屏或卡死，用户以为功能坏了。
性能影响：1080p 视频在弱网下加载慢，首帧延迟高；后台标签页中视频可能被浏览器暂停，切回来时需手动恢复。
- 建议在 JS 切换逻辑里加兜底：若
video.readyState < 2（未加载元数据），则 fallback 到静态背景图 - 用
matchMedia("(prefers-reduced-motion: reduce)")检测系统偏好，开启后直接禁用视频背景 - 不要在
scroll或resize中频繁切换视频——CPU 和流量双吃紧 - 真要支持多视频，把所有
src提前用new Image().src = ...预加载（对视频无效），改用fetch(url, {method: "HEAD"})做存在性校验更实际
最常被忽略的一点：视频切换后，currentTime = 0 不一定重置成功。有些浏览器缓存了播放位置，得在 loadeddata 后显式设置 video.currentTime = 0 再 play()，否则可能从中间帧开始播。
