html中视频背景必须用标签实现，禁用css background-image；需设置autoplay muted playsinline、position:fixed/absolute、object-fit:cover及z-index分层；移动端须注意静音与内联播放；优化加载需preload="none"并用户手势触发播放。
HTML里用<video></video>做背景，别用background: url()
CSS 的 background-image 不支持视频，硬塞 background: url(video.mp4) 会直接失效，浏览器当没写。真要动态背景，必须用 <video></video> 标签 + 定位覆盖 + 层级控制。
常见错误是把视频当图片塞进 CSS，结果控制台没报错、页面也没反应——因为浏览器默默忽略了它。
- 视频必须放在
或容器内，设为position: fixed或absolute覆盖内容层 - 加
autoplay muted loop属性，否则多数浏览器禁止自动播放（尤其有声音时） - 用
object-fit: cover防止拉伸变形；width: 100%; height: 100%只是基础尺寸，不保证适配 - 记得在
<video></video>后面放内容容器，并设z-index高于视频层（比如z-index: 1），否则文字被盖住
移动端自动播放失败？检查muted和playsinline
iOS Safari 和很多安卓浏览器强制要求视频静音才能自动播放，漏掉 muted 就卡在首帧；另外 iOS 还要加 playsinline，否则视频会全屏弹出，破坏背景效果。
错误现象：PC 上好好的，手机一打开就黑屏或跳转全屏。
立即学习“前端免费学习笔记（深入）”；
- 必须同时带
autoplay muted playsinline三个属性 -
muted不能靠 JS 后续设置（如video.muted = true），得写在 HTML 标签里才生效 - 某些安卓 WebView 对
playsinline支持不稳定，可加webkit-playsinline兼容 - 如果真需要带声背景，只能靠用户手势触发播放（比如点击按钮），无法全自动
<video></video>作为背景时，怎么避免拖慢页面加载？
视频文件大，不处理会阻塞渲染、拉长 LCP（最大内容绘制），尤其首屏背景视频容易让页面“假死”。不是加个 loading="lazy" 就完事——它对 <video></video> 无效。
- 优先用
preload="none"，等 DOM 加载完再用 JS 触发load()，或监听DOMContentLoaded后调play() - 视频格式选
.mp4（H.264）为主，兼容性最好；.webm可作为备选，但不要指望它在 iOS 上工作 - 分辨率别超 1280×720，码率压到 1500–2500 kbps，背景视频不需要 4K
- 考虑用 poster 图片占位：
poster="bg-poster.jpg"，避免白屏或闪烁
用 JS 控制背景视频时，play() 报错NotAllowedError怎么办？
这个错误几乎只发生在试图在非用户手势上下文里调 play()，比如 window.onload、setTimeout、或者滚动监听里直接播——浏览器认为这属于“干扰性自动播放”，直接拒绝。
- 唯一稳妥的触发时机是用户真实交互后，比如
click、touchstart、keydown - 可以加一个半透明遮罩层 + “开始观看”按钮，点一下再播放视频，既合规又提升可控性
- 如果一定要“悄悄播”，可在
document.addEventListener('click', ...)里首次捕获后立即调play()，并移除监听（只许一次） - 别依赖
canplay或canplaythrough事件来触发play()，它们不构成用户激活上下文
最麻烦的其实是视频编码兼容性和首帧解码延迟——同一段 MP4，在 Chrome 里秒开，Safari 可能卡 300ms 才出第一帧。测试时一定真机多跑几遍，别只信桌面模拟器。
