必须用object-fit: cover配合position: fixed、width: 100vw、height: 100dvh、top: 0、left: 0、z-index: -1，并加muted、autoplay、playsinline属性，清body margin，禁用原生控件，优先使用.mp4格式及poster封面图。
如何让 video 元素真正铺满整个视口且不拉伸变形
直接设 width: 100vw; height: 100vh; 会导致黑边或裁切——关键不是填满，而是「覆盖」。必须用 object-fit: cover;，再配合 position: fixed; 脱离文档流，否则滚动时视频会位移或被遮挡。
- 绝对不要用
background-video（不存在这个 CSS 属性） -
z-index必须设为负值（如-1），否则会盖住页面内容 - 加
poster属性提供首帧占位图，避免白屏或闪烁 - 移动端 Safari 对自动播放限制极严，需加
muted autoplay playsinline
autoplay 失败的常见原因和绕过方式
Chrome 和 Safari 默认禁止有声音的自动播放，即使你写了 autoplay，浏览器也可能静音暂停。根本解法是：必须同时满足 muted + autoplay + playsinline（iOS 必需）。
- 错误写法：
<video autoplay></video>→ 在多数现代浏览器中被忽略 - 正确最小集合：
<video muted autoplay playsinline></video> - 如果后端返回的是带音频轨的 MP4，用 FFmpeg 预处理静音：
ffmpeg -i in.mp4 -vcodec copy -acodec aac -strict experimental -vol 0 out.mp4 - 不要依赖 JS 的
.play()触发——用户手势未触发前，调用会抛DOMException: play() failed because the user didn't interact with the document
全屏视频在不同设备上的尺寸适配陷阱
单纯靠 CSS 媒体查询不够，因为 iPhone X/XS 等机型有刘海和安全区域，100vh 实际小于可视高度，导致底部黑边。真正可靠的方式是用 aspect-ratio + min-width/min-height 组合控制。
- 推荐视频比例：16:9（横屏主流）或 9:16（竖屏全屏需额外处理）
- 设容器宽高比：
aspect-ratio: 16 / 9;，再用min-width: 100vw; min-height: 100vh;确保覆盖 - iOS 上
vh单位在地址栏收起/展开时会跳变，用100dvh（动态视口高度）替代100vh更稳（Chrome 104+、Safari 16.4+ 支持） - 测试时务必真机打开，模拟器无法复现 Safari 的 autoplay 策略和尺寸计算偏差
如何避免视频加载阻塞首屏渲染
video 标签默认会触发预加载（preload="metadata"），但若视频体积大、CDN 延迟高，仍可能拖慢 LCP。核心策略是延迟加载 + 降级 fallback。
- 设
preload="none"，用 IntersectionObserver 监听进入视口后再触发load() - 提供 WebM 格式作为首选（比 MP4 小 20–30%），并用
<source></source>多格式兜底：<source src="bg.webm" type="video/webm"><source src="bg.mp4" type="video/mp4"></source></source> - 首屏内容用
opacity: 0+transition控制入场，等loadeddata事件后再显，避免闪白 - 禁用右键菜单和下载：
oncontextmenu="return false;" ondragstart="return false;"（仅 UI 层面，不能防抓取）
profile 必须是 baseline 或 main，level ≤ 3.1，否则 iOS 旧机型直接不解析；用 ffprobe 检查：ffprobe -v quiet -show_entries stream=profile,level -of default video.mp4。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
