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合成，低端机直接掉帧
object-fit当成万能填充开关，却忘了它前面得先有尺寸锚点，后面得接住浏览器的自动播放规则。 
