用<video>标签实现背景视频需将其置顶、fixed全屏、object-fit:cover，并设autoplay muted loop playsinline；必加poster和CSS降级fallback，避免白屏；移动端需用户手势解锁播放。
用 <video> 标签实现背景视频，别用 background-video
HTML 没有 background-video 这种属性或标签，所谓“背景视频”本质是把 <video> 元素置于页面最底层，并用 CSS 覆盖全屏、隐藏控制栏、设为静音循环。常见错误是试图在 body 的 style 里写 background: url(video.mp4) —— 这完全无效，浏览器不支持视频作为 background-image。
正确做法：
- 把
<video>放在<body>最顶部（或<header>内），确保 DOM 顺序靠前 - 用
position: fixed+top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;铺满视口 - 必须加
autoplay muted loop属性，否则 Chrome/Safari 会阻止自动播放 - 加
playsinline（iOS Safari 必需），避免全屏跳转
为什么加 poster 属性和 fallback 图片很重要
视频加载有延迟，首帧出现前页面会空白几秒；移动端可能因网络或策略完全不加载视频。不处理 fallback，用户看到的就是白屏或滚动条错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
poster指向一张与视频首帧一致的缩略图，格式推荐.webp（体积小、兼容好） - 在
<video>外层包一层<div class="bg-video-wrapper">，用 CSS 设置该 div 的background-image作降级 - 不要依赖 JS 检测视频是否加载成功再显示内容 —— 延迟不可控，优先用声明式 fallback
object-fit: cover 和 object-fit: fill 的实际差异
这是最容易被忽略的视觉坑。用 cover 会等比缩放并裁剪，保证铺满且不拉伸；用 fill 会强行拉伸填满，导致人物变形、文字模糊。
典型场景判断：
- 宣传页/首页横幅：选
cover，牺牲边缘内容保画质 - 纯装饰性动态纹理（如粒子动效视频）：可选
fill，无关键构图 - 绝对避免在
width: 100vw; height: 100vh同时用object-fit: contain—— 会留白，破坏“背景”感
移动端自动播放限制下，怎么让视频真正静音播放
即使写了 muted，某些安卓 WebView 或旧版 iOS 仍可能拦截。根本原因是：浏览器要求“用户手势触发后才能解禁音频”，而 muted 本身不等于“已获授权”。
稳妥方案：
- 确保
<video>标签上同时存在muted和autoplay，且没被 JS 动态移除 - 避免在
document.ready或window.load里调用play()—— 此时无用户上下文，大概率失败 - 如果业务允许，首次点击任意区域时调用一次
video.play().catch(() => {})，多数浏览器会就此解锁后续自动播放
复杂点在于：不同机型对“静音自动播放”的宽容度差异极大，测试必须覆盖 iOS 15+、Android Chrome 110+、微信内置浏览器。别信“本地测试 OK 就上线”—— 真实网络环境和系统策略才是关键变量。
