可用video标签配合css实现背景效果：需加autoplay、muted、loop属性，设position:fixed/absolute与z-index:-1，用object-fit:cover铺满且保持宽高比，并设poster避免空白。
video 元素如何替代 background-image
HTML5 里没有 background-video 这种东西，background-image 也不接受 video 地址。真想用视频当背景，只能用 <video></video> 标签盖在底层，再用 CSS 压成“背景效果”。
关键不是“怎么放视频”，而是“怎么让它像一张图一样不抢戏”——静音、自动播放、循环、铺满、层级压低、内容不干扰文字或交互。
常见错误现象：video 卡在左上角、有控制条、暂停后黑屏、手机端不自动播放、文字被视频盖住看不见。
- 必须加
autoplay和muted，否则 Chrome/Firefox/Safari 都会阻止自动播放 - 加
loop，否则播完就停，变成黑屏或首帧静止 - 用
poster属性设占位图，避免加载空白或首帧异常 -
video必须设position: fixed或absolute，并配合z-index: -1（不能用-999，某些浏览器对负数 z-index 渲染异常）
CSS 铺满全屏但保持宽高比的写法
直接 width: 100%; height: 100% 会拉伸变形；用 object-fit: cover 是正解，但得确认父容器有明确尺寸，且 video 自身不溢出。
立即学习“前端免费学习笔记（深入）”；
典型场景：首页 banner 区域需要视频背景，上面叠标题和按钮。
容易踩的坑：object-fit: cover 在旧版 Safari（min-height: 100vh 比 height: 100vh 更安全，避免内容少时高度塌缩。
- 给
video设min-width: 100%; min-height: 100%+object-fit: cover - 父容器（比如
<section class="hero"></section>）要设position: relative，否则z-index: -1失效 - 别忘了加
overflow: hidden，防止视频宽高比导致边缘溢出
移动端自动播放失败的应对策略
iOS Safari 和安卓 Chrome 对自动播放限制极严：没用户手势触发、没 muted、或页面未完全可见，都会静音或中止播放。
这不是 bug，是策略。强行绕过会触发降级（如只播第一帧）或白屏。
实际能做的只有两件事：接受降级，或引导用户点一下。
- 必加
muted—— 即使你打算后续用 JS 解除静音，也得先带上它才能 autoplay - 用
playsinline（iOS 必需），否则视频会跳全屏 - 监听
video的canplaythrough或playing事件，失败时 fallback 到poster图片 - 不要依赖
loadstart或loadeddata，它们太早，不代表能播
性能与兼容性取舍要点
视频背景比图片重得多，尤其高清 MP4/H.264，首屏加载慢、内存占用高、低端机卡顿明显。
不是所有场景都适合：产品页首屏可用，但长列表页或表单页加视频背景，用户还没看清输入框，CPU 就开始发热了。
容易被忽略的点：格式选错会导致 iOS 完全不识别，或 Android 解码失败黑屏。
- 优先用
.mp4（H.264+AAC），iOS/Android 兼容最好；.webm可作为备选，但 Safari 不支持 - 分辨率别超 1920×1080，720p 足够；码率控制在 2–4 Mbps，太高无意义还拖慢首帧
- 服务端开启
Accept-Ranges支持，否则 Safari 可能无法 seek 或卡在缓冲 - 用
<source></source>标签提供多格式，但注意顺序：mp4放最后（浏览器按顺序找第一个支持的）
最麻烦的从来不是怎么写那几行 HTML/CSS，而是视频源本身：编码参数、CDN 缓存策略、首帧关键帧位置、移动端是否真能播起来——这些没调好，代码写得再漂亮，用户看到的还是黑屏或加载转圈。
