video背景全屏适配需用position:fixed+100%宽高+object-fit:cover，禁用100vh/vw；移动端自动播放必须同时满足muted、autoplay、playsinline等html属性；多section场景应动态切换视频源而非重复嵌入。
video 标签本身不支持“滑动布局”语义，所谓全屏滑动布局中的背景视频，本质是多个 section 或 div 垂直堆叠，其中某一个（或多个）用固定定位的 video 作为视觉背景。自适应成败不在“滑动”，而在“视频是否始终覆盖当前视口且不触发播放拦截”。
为什么 width: 100vw; height: 100vh 在滑动布局里会出问题
在滚动容器（如 body 或带 overflow-y: scroll 的父层）中直接设 width: 100vw; height: 100vh，会导致：
– 滚动时视频随文档流位移，出现错位或被内容遮挡
– 移动端地址栏显隐会动态改变 100vh 实际值，造成底部黑边或裁切
– 若页面高度 > 视口，100vh 只覆盖首屏，后续 section 滑入时背景消失
真正可靠的做法是脱离文档流：
– 必须用 position: fixed
– top: 0; left: 0; width: 100%; height: 100%（注意：不是 100vw/100vh）
– z-index: -1 确保不挡内容
– 外层不要加 transform、clip-path 或 overflow: hidden，否则可能截断渲染
object-fit: cover 是必须项，但单独写没用
object-fit: cover 只控制视频帧如何填充容器，它不解决播放、定位或溢出问题。常见误判：
– 写了 object-fit: cover 但视频还是留黑边 → 没配 position: fixed 或尺寸未明确
– 视频拉伸变形 → 错用了 object-fit: fill，应改回 cover
– 移动端关键内容（比如人脸、按钮）被裁掉 → 视频源构图没预留安全边距，cover 本身无法智能避让
实操要点：
– video 元素需有明确宽高（如上条所述的 fixed 尺寸）
– 不要给 video 设 min-width/min-height，会干扰 object-fit 行为
– 若视频原始比例和主流屏幕差异极大（如 4:3 视频用于 21:9 屏），轻微裁切不可避免，优先换源而非妥协用 contain 或 fill
移动端自动播放失败的硬性条件组合
iOS Safari 和 Android Chrome 对非用户手势触发的视频播放限制极严。只写 autoplay 几乎必然失败，必须同时满足：
– muted（HTML 属性，不是 JS 设置 muted = true）
– autoplay（同上，必须是 HTML 属性）
– playsinline（iOS 必需，防止跳原生全屏）
– webkit-playsinline（旧版 iOS 兼容）
– preload="metadata" 或 preload="auto"（避免白屏等待）
错误示例：
– <video autoplay></video> → 被静音拦截
– <video muted></video> → 缺少 autoplay，不播
– JS 中 video.play() 在无用户交互前调用 → 抛 DOMException: play() failed because the user didn't interact with the document
正确最小集合：<video muted autoplay playsinline webkit-playsinline preload="metadata" loop><source src="bg.mp4" type="video/mp4"></source></video>
滑动布局中容易被忽略的细节
滑动场景下，视频背景常被当成“一次性设置”，但以下三点极易漏掉：
– body { margin: 0 } 必须清空，否则 fixed 视频会因 body 默认 margin 偏移
– 如果用 scroll-behavior: smooth 或 JS 滚动库（如 Locomotive Scroll），需确认它们不会给 body 或根元素加 transform，否则 fixed 元素会相对其定位，而非视口
– 多个 section 都想配背景视频？不要重复放多个 video，而是用 JS 监听 scroll 或 intersectionObserver 动态切换 src 和 poster，否则内存暴涨、解码卡顿
最后提醒：所有“适配”都建立在视频源质量基础上。720p 视频在 4K 屏上用 cover 放大后模糊，不是 CSS 能解决的——优先用 1080p 或 4K 源，而不是调低清晰度再强撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
