仅靠 object-fit: cover 无法实现真正可靠的移动端全屏视频背景填充，必须配合 muted、playsinline、autoplay、preload 等 HTML 属性，position: fixed、object-fit: cover、overflow-x: hidden 等 CSS 规则，以及 canplaythrough 后立即调用 play() 的 JS 控制，才能解决播放拦截、溢出、裁切偏移等问题。
仅靠 object-fit: cover 无法实现真正可靠的移动端全屏视频背景填充——它只管“怎么填”，不管“能不能播”“会不会溢出”“关键帧是否被裁”。必须配合 HTML 属性、JS 播放控制、viewport 声明和 overflow-x: hidden，才算落地。
为什么 object-fit: cover 单独用在移动端视频上经常失效
它只是 CSS 渲染层的缩放策略，不解决底层播放限制或布局溢出问题。常见现象包括：
- iOS Safari 点开空白（ autoplay 被拦截）
- 安卓微信内视频卡在首帧（缺少
playsinline或muted） - 竖屏时左右出现滚动条（
video实际宽度略超100vw，但body没设overflow-x: hidden） - 横屏切换后视频突然偏移或留白（
100vh在 Safari 地址栏收放时抖动）
必须加上的 HTML 属性：muted + playsinline + autoplay + preload
缺一不可，否则视频大概率不播放或跳转原生全屏破坏布局：
-
muted：不是可选，是 iOS/Android 自动播放策略的硬性前提；显式写muted="true"更稳 -
playsinline：专治 iOS Safari 强制全屏跳转；Android Chrome 也需要它维持内联渲染 -
autoplay：声明意图，但单独存在无效——必须和muted组合才生效 -
preload="auto"或preload="metadata"：前者提升首帧加载概率，后者节省流量；避免用none，否则用户划到页面时视频还没就绪
示例写法：
立即学习“前端免费学习笔记（深入）”；
<video autoplay muted playsinline preload="auto" loop> <source src="bg.mp4" type="video/mp4"> </video>
CSS 必须配齐的三件套：position + object-fit + overflow-x
只写 object-fit: cover 是半吊子。完整控制链如下：
- 给
video设position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;（推荐dvh而非vh，规避 iOS 地址栏高度抖动） -
video自身加object-fit: cover; object-position: 50% 30%;（用百分比微调裁切焦点，避免关键内容被切） - 最关键但常被漏掉：
body { overflow-x: hidden; }——水平溢出不裁，滚动条必现 - 加
z-index: -1前，确保video是position: fixed（否则z-index不生效），且父容器没创建新层叠上下文（比如没设transform或opacity）
JS 必须立刻调用 play()，不能等 DOM 加载完成
不是加了 autoplay muted loop 就万事大吉。真实情况是：
- 某些版本 Safari 仍可能卡住第一帧，哪怕已加
muted - 延迟哪怕 100ms 调用
play()都可能被判定为“非用户触发”，报错DOMException: play() failed because the user didn't interact with the document first - 必须在
load或canplaythrough后立即执行，别用setTimeout或DOMContentLoaded后再调
最小可行 JS：
const video = document.querySelector('video');
video.addEventListener('canplaythrough', () => {
video.play().catch(e => console.log('autostart blocked:', e));
});
最易被忽略的点：裁切焦点不在正中时，object-position 得实测——不同设备宽高比差异大（iPhone 14 Pro 是 19.5:9，部分安卓是 20:9），同一组百分比值在竖屏下可能切掉人物头部，在横屏下又露太多天空。别信“居中就行”，要真机连测。
