video元素需设display: block、object-fit: cover、position: fixed、top: 0、left: 0、z-index: -1、pointer-events: none，并加muted、autoplay、playsinline属性，preload="metadata"，优先用.mp4格式，配poster封面图。
video元素默认不铺满，object-fit: cover 是关键
直接把 <video></video> 放进全屏容器里，它大概率会留黑边、拉伸变形或只显示局部——因为视频原始宽高比和屏幕不一致。这时候靠 object-fit: cover 才能真正“覆盖铺满”，类似 background-image 的行为。
但注意：object-fit 必须加在 <video></video> 元素本身上，不是它的父容器；而且只对替换元素（<img>、<video></video>、<iframe></iframe>）生效。
-
<video></video>必须设为块级（display: block），否则object-fit在部分浏览器中失效 - 别用
width: 100%; height: 100%强撑尺寸，优先用min-width: 100vw; min-height: 100vh配合object-fit: cover - 移动端 Safari 对
object-fit支持良好，但 iOS 12 以下需确认；Android Chrome 4+ 没问题
全屏容器必须脱离文档流，避免滚动条和缩放干扰
如果只是给 <video></video> 设 100vw/100vh，但父容器有 padding、margin 或被其他元素挤压，就会漏白边或触发横向滚动条。真正的“全屏背景”需要视觉上完全覆盖视口，且不参与布局流。
- 给
<video></video>加position: fixed; top: 0; left: 0; z-index: -1，彻底脱离文档流 - 禁用视频默认控制栏：
controls="false"，否则控件可能遮挡内容或破坏全屏感 - 加上
pointer-events: none，避免视频层拦截鼠标事件（比如按钮点不到） - 如果页面有滚动，确保
<video></video>不随滚动偏移——fixed已解决，不用absolute
自动播放和静音是绕不开的兼容性门槛
Chrome、Safari、Firefox 都强制要求：自动播放带声音的视频必须由用户手势触发，否则会被静音甚至暂停。背景视频几乎都得“无声自动播”，这是硬性规则，不是 CSS 能绕开的。
- 必须加
muted和autoplay属性，缺一不可；playsinline也建议加上（iOS 全屏限制） - 不要依赖 JS 后续调用
play()—— 多数浏览器会拒绝无用户交互的音频播放请求 - 某些安卓 WebView 仍可能拦截
autoplay，可加loop保证持续播放，同时准备 fallback 图片 - 错误信息如
DOMException: play() failed because the user didn't interact with the document first就是典型提示
性能和加载体验要主动干预，别等浏览器猜
背景视频体积大、解码重，用户没看到画面前就加载完整视频，既浪费流量又拖慢首屏。得用策略提前控制资源加载节奏。
- 用
preload="metadata"，只预加载头信息（时长、宽高），不加载帧数据 - 视频格式优先选
.mp4（H.264），兼容性最好；.webm可作为第二源，但非必需 - 分辨率不必高于 1920×1080，超高清对背景意义不大，反而增加首帧延迟
- 加
poster属性指定封面图，避免视频加载中出现黑屏或闪烁
最常被忽略的是 z-index: -1 和 pointer-events: none 的组合——少了前者，视频可能被其他元素遮住；少了后者，点击穿透失效，交互就断了。这两处不写，整个背景视频方案就算视觉上铺满了，实际也跑不通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
