video标签需同时含autoplay、muted、loop，iOS还需playsinline；用position:fixed+object-fit:cover+width/height:100%替代100vh；必须提供MP4+WebM双格式source；fallback用CSS背景图+JS降级。
video标签必须带autoplay、muted、loop，否则90%概率不播
现代浏览器（Chrome 120+、Safari 17+、Firefox 125+）默认阻止有声视频自动播放。漏掉muted，autoplay就形同虚设——视频可能黑屏、卡在第一帧，或控制台报NotAllowedError: play() failed because the user didn't interact with the document first。
常见错误写法：<video autoplay loop>（没muted）、<video muted loop>（没autoplay）、<video autoplay muted>（没loop导致播完停住）。
-
autoplay和muted必须同时存在，缺一不可 -
loop不是可选——背景视频中断会破坏体验 - iOS Safari 还要额外加
playsinline和webkit-playsinline，否则强制全屏弹出
用position: fixed + object-fit: cover，别碰100vh
width: 100vw; height: 100vh看着简洁，但实际在移动端会因地址栏显隐、缩放、滚动条宽度变化而错位或留白。iOS Safari 滚动时视口高度跳变，100vh值会突变，video却不会重绘，结果就是顶部/底部露白。
可靠方案是：position: fixed + top: 0; left: 0; width: 100%; height: 100% + object-fit: cover。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器不需要
position: relative，直接让video脱离文档流固定在视口 -
object-fit: cover确保等比缩放填满，fill会拉伸变形，contain会留黑边 - 务必加
z-index: -1，否则内容层会被压在底下；再加pointer-events: none避免遮挡点击
source必须双格式：MP4(H.264) + WebM(VP9)
只写一个<source src="bg.mp4" type="video/mp4">等于主动放弃 Firefox 和旧版 Edge 用户。Firefox 默认不支持 H.264，Safari 旧版本不支持 VP9，只有双写才能覆盖主流浏览器。
type值必须严格匹配：video/mp4不能写成video/x-matroska，video/webm不能漏掉type属性，否则某些浏览器直接跳过该source。
- MP4 推荐用 H.264 High@L4.0 编码，码率控制在 2000–4000 kbps
- WebM 用 FFmpeg 转：
ffmpeg -i bg.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus bg.webm - 不要用 GIF 或 Canvas 模拟——CPU 占用高，iOS 上极易卡顿
移动端 fallback 和 poster 处理很关键
很多安卓低端机、部分 iOS 设备仍会拒绝自动播放视频，甚至不触发loadedmetadata事件。纯靠poster不够——Safari 对poster缩放支持差，容易模糊拉伸；且一旦视频加载失败，poster也不会自动显示。
更稳妥的做法是 CSS 降级：.video-background { background-image: url('fallback.jpg'); background-size: cover; }，同时用 JS 监听error或canplaythrough动态切换。
-
poster仅用于首帧加载前的短暂占位，不是兜底方案 - 小屏幕设备建议 JS 检测
screen.width 后直接禁用视频，改用静态图 - 别在
body直接子元素里放video——它可能被其他fixed元素（如导航栏）遮挡
真正难的不是写几行 HTML 和 CSS，而是处理 iOS 地址栏跳变、Firefox 不支持 MP4、静音策略变更、首帧加载空白这些边界情况。每个属性漏掉一个，就可能在某台设备上完全失效。
