用标签配合position: fixed; width: 100vw; height: 100dvh; object-fit: cover; z-index: -1实现全屏铺满不变形，需加preload="metadata"、playsinline、muted并JS立即调用play()，同时设置viewport-fit=cover和重置body margin。
background-video 怎么让视频铺满整个视口还不变形
直接用 background-image 加视频？不行，CSS 不支持视频作为 background-image。必须用 标签 + 定位覆盖 + object-fit: cover 才能真正可控。
关键不是“填满”，而是“填满且不拉伸、不裁错重点”。object-fit: cover 是核心，但它只在 video 元素自身生效，前提是 video 必须撑满父容器——而父容器得是全屏的、无滚动、不被其他元素干扰的。
- 给
设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; - 务必加
z-index: -1（不是 0 或 1），避免遮挡后续内容；同时父级不能有overflow: hidden或 transform，否则 fixed 定位会失效 - 视频源优先用
mp4（H.264），不要依赖webm，Safari 对 webm 的object-fit支持不稳定
video 自动播放失败被浏览器拦截怎么办
Chrome、Safari、Firefox 现在默认禁止无用户交互下的音频自动播放，哪怕你加了 muted，某些版本 Safari 仍可能卡住第一帧。
不是加 autoplay muted loop 就万事大吉。真实情况是：muted 必须显式设为 true，且 video 元素得在 DOM ready 后立即调用 play()，延迟哪怕 100ms 都可能被判定为“非用户触发”。
- HTML 中写
（playsinline对 iOS 必须） - JS 中立刻执行：
document.querySelector('video').play().catch(e => console.log('autostart blocked:', e)); - 别在
window.onload或DOMContentLoaded之后再 setTimeout 延迟调用，那基本必报NotAllowedError
移动端 video cover 布局错位或顶部留白
这不是 CSS 写错了，大概率是 viewport 设置或 iOS 的“安全区域”导致的。iPhone X 及更新机型在全屏 video 下，系统状态栏和底部指示器会让 100vh 实际小于可视高度，而 object-fit: cover 仍按原始尺寸裁切，造成上下黑边或偏移。
解决思路不是调 height，而是用单位兜底：用 100dvh 替代 100vh（dynamic viewport height），它会动态响应安全区域变化。
- CSS 中写
height: 100dvh;，同时保留height: 100vh;作为降级（旧浏览器忽略 dvh） - 确保
包含viewport-fit=cover，例如： - 如果仍错位，检查是否父元素有 padding 或 body 有 margin —— 移动端 body 默认 margin 为 8px，必须重置为 0
视频加载慢、首帧黑屏时间长怎么优化
用户点开页面，等两秒才看到画面，体验就断了。这不是带宽问题，而是视频资源没做前置优化。
核心矛盾：cover 布局需要视频快速渲染第一帧，但浏览器默认 lazy-load 视频，且关键帧（IDR frame）位置靠后时，解码就得从头扫。
- 导出视频时启用 “fast start”（也叫 moov atom at beginning），FFmpeg 命令加
-movflags +faststart - 视频尺寸别盲目堆高，1920×1080 足够，超 4K 在多数设备上只是增加 decode 压力，不提升观感
- 用
preload="metadata"（不是auto），既减少初始下载量，又能提前获取时长/尺寸，让object-fit计算更准
最易被忽略的一点：video 元素必须放在 顶层，不要嵌套在 flex/grid 容器里再设 fixed —— 渲染层叠顺序和合成行为会意外影响首帧时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
