video 标签加 object-fit:cover 为什么背景还是留白？
因为 video 默认是替换元素，它的尺寸由宽高属性、CSS 宽高、父容器共同决定，而 object-fit:cover 只控制内容如何缩放填充——不解决“容器本身没撑满”的问题。常见现象是视频上下 / 左右黑边，尤其在移动端或非 16:9 视口里。
必须同时满足三个条件：父容器设为全屏、video设为绝对定位或 flex 子项、显式声明宽高为 100%。
- 父容器（比如
<section>）要加position: relative和height: 100vh -
video元素需设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须加
object-fit: cover，否则会拉伸变形
用 vw/vh 单位替代百分比能避免裁切吗？
不能。视口单位（vw/vh）只影响尺寸设定，不改变裁切逻辑。object-fit: cover本身就会裁切——这是它实现“覆盖全屏且不失真”的必然代价。
真正影响是否裁切的是视频原始宽高比与当前视口宽高比的匹配程度。比如 16:9 视频在竖屏手机（9:16）上，无论用 100vw 还是100vh，总有一边会被裁掉。
立即学习 “ 前端免费学习笔记（深入）”；
- 想减少裁切？优先选接近目标设备主流比例的源视频（如手机端可备一份 9:16 竖版）
- 用
min-width: 100vw; min-height: 100vh配合object-fit: cover，比单纯width: 100vw; height: 100vh更稳妥 - 注意
vh在 iOS Safari 中可能因地址栏显示 / 隐藏跳变，建议加min-height: 100%兜底
autoplay 和 muted 为什么总是被浏览器拦截？
现代浏览器（Chrome、Safari、Firefox）默认禁止有声音的自动播放，这是策略性限制，不是 bug。即使写了 autoplay 和muted，也得满足“用户已与页面交互过”或“媒体无音频轨道”才可能生效。
实际部署时最稳的写法是：显式加 muted + autoplay + playsinline（iOS 必需），并监听canplaythrough 事件做兜底播放尝试。
-
<video muted autoplay playsinline>是基础三件套 - JavaScript 里补一句
video.play().catch(e => console.warn("Autoplay prevented:", e)) - 别依赖
preload="auto"来“提前触发”，它不解决权限问题
性能差、卡顿、首帧黑屏怎么排查？
全屏视频最大的性能陷阱不是样式，而是资源加载和解码。黑屏常发生在 loadedmetadata 未触发就渲染了，卡顿多源于视频编码格式或分辨率超标。
- 用
mp4（H.264+AAC）作为主格式，WebM（VP9）作降级，避免 HEVC（兼容性差） - 分辨率别超 1920×1080，手机端甚至可用 1280×720，大分辨率 + 高码率 = 首帧延迟 + 内存飙升
- 加
poster属性提供占位图，避免黑屏；监听waiting/canplay事件调试加载状态 - CSS 里避免给
video加transform或filter，会强制 GPU 合成，低端机直接掉帧
全屏视频的“响应式”本质是让视觉区域填满，但裁切、加载、静音策略这些底层约束没法靠 CSS 绕过去。最容易被忽略的，是把 object-fit 当成万能填充开关，却忘了它前面得先有尺寸锚点，后面得接住浏览器的自动播放规则。
