全屏背景视频最可靠方案是position: fixed，因其脱离文档流、贴合视口且不随滚动偏移；需配合top/right/bottom/left: 0、object-fit: cover、z-index: -1及autoplay muted playsinline等属性确保兼容性与视觉完整性。
全屏背景视频必须用 position: fixed 吗？
不是必须，但position: fixed是最可靠的选择。用position: absolute容易被父容器裁剪或滚动偏移，尤其在移动端 Safari 中表现不稳定；而fixed能真正脱离文档流、贴合视口边缘，且不随页面滚动位移。
关键点：
-
z-index要设为负值（如-1），确保视频在内容层之下，但不能过低（比如-9999）——某些浏览器会触发渲染层级异常，导致文字模糊或点击失效 - 必须显式设置
top: 0; right: 0; bottom: 0; left: 0;，仅靠width: 100vw; height: 100vh;无法覆盖滚动条区域或缩放后的视口偏差 - 加
object-fit: cover;，否则视频拉伸变形；若需居中裁切，别用background-size: cover（<video>不支持 background 属性）
如何让视频真正“静音自动播放”且不被 iOS/Android 拦截？
iOS 和 Android 对自动播放有严格限制：必须静音、用户交互前禁止播放音频、且需明确声明 muted 和 autoplay。仅加 autoplay 属性大概率失败。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须同时写
autoplay muted playsinline——playsinline是 iOS 必需，否则全屏弹出打断布局 - JavaScript 补充兜底：
video.play().catch(e => console.log("Autoplay prevented:", e))，但不要在DOMContentLoaded立即调，应在visibilitychange或首次用户事件（如click、scroll）后触发 - 避免设置
volume = 0替代muted，部分安卓 WebView 仍会拦截；muted是唯一被广泛认可的静音标识
poster 图片和加载失败时的降级方案怎么写才不闪屏？
视频加载慢或失败时，若只靠 poster，会出现白屏或占位图突然出现再消失的“闪屏”。根本原因是 poster 只在第一帧未加载完成时显示，而视频元数据就绪后它就被丢弃，中间无过渡。
稳妥做法：
- 用 CSS 背景图模拟 poster：
background: #000 url(placeholder.jpg) center/cover no-repeat;，并给<video>设置opacity: 0初始态 - 监听
loadeddata事件，再渐变显示视频：video.style.opacity = "1"; video.style.transition = "opacity 0.3s ease" - 加
preload="metadata"，避免整段视频预加载拖慢首屏；但别用preload="auto"，移动端流量和内存压力大
响应式下宽高比错乱、黑边或溢出怎么办？
不同设备屏幕比例差异大，object-fit: cover 虽能裁切，但可能把关键画面（比如人脸）切掉，或上下/左右留黑边。单纯靠 CSS 无法智能适配内容主体。
可干预点：
- 视频本身导出时预留安全区：16:9 视频建议按 4:3 构图拍摄，关键元素避开上下 15% 区域
- 用
aspect-ratio: 16/9配合min-width: 100vw和min-height: 100vh组合控制容器，再让视频填满该容器（而非直接作用于<video>） - 极端情况（如折叠屏、iPad 横竖切换）可监听
resize，动态调整object-position偏移量，例如：video.style.objectPosition = "50% 30%"把焦点上移
最易被忽略的是视频编码参数：H.264 的 level 建议 ≤ 4.2，否则老机型解码失败直接黑屏；WebM 格式虽小但兼容性差，生产环境必须提供双格式 <source> 回退。
