video元素需显式设置宽高（如width/height:100%或aspect-ratio）且父容器有明确尺寸，object-fit:cover才生效；poster图必须与视频宽高比一致，否则裁剪异常；absolute定位需配合inset:0和父容器relative定位；老版safari/android webview不支持object-fit需降级处理。
video元素没设宽高，object-fit:cover根本没生效
浏览器看到object-fit: cover，但发现video容器没有可计算的宽高（比如只写了width: 100%，height是auto），就会放弃裁剪逻辑，退回到按视频原始尺寸撑开——这时你看到的“异常”，其实是它压根没工作。
- 必须显式设置
video的尺寸：比如width: 100%; height: 100%，或用flex: 1、aspect-ratio: 16 / 9锁定比例 - 父容器也要有明确尺寸，例如
height: 100vh或aspect-ratio: 16 / 9；只靠max-width或padding-bottom技巧不够，它们不作用于video自身 - 别混用
width/heightHTML 属性和 CSSobject-fit——前者会强制固有尺寸，覆盖后者的缩放行为
poster图尺寸与视频宽高比不一致
poster不是装饰图，它是video的可替换内容，和首帧共享同一渲染通道。如果poster是1200×800（3:2），而视频是1920×1080（16:9），哪怕写了object-fit: cover，浏览器也只能在不匹配的源图上强行裁剪，结果就是关键内容被切掉、边缘模糊、或出现意外留白。
- 必须用和视频完全一致宽高比的
poster图，例如16:9视频配1920×1080或1280×720封面 - 如果用了
aspect-ratio: 16 / 9在父容器上，poster也得按这个比例裁切，否则contain模式下会出现非预期黑边 - 避免给
poster单独加class写额外CSS——所有缩放行为只应通过video上的object-fit统一控制
absolute定位 + object-fit组合导致poster错位
当video设了position: absolute，它的poster渲染位置不会自动同步更新。你可能看到按钮、文字层和封面图对不上，或者全屏时封面突然偏移——这不是bug，是定位逻辑未对齐。
- 不要在
video上同时用position: absolute和object-fit - 想让
video铺满父容器，优先用inset: 0+position: absolute，再配合object-fit: cover做内部缩放，而不是靠top/left/width/height手动拉伸 - 父容器必须设
position: relative或position: fixed，否则absolute会相对于视口定位，进一步加剧错位
移动端Safari或老Android WebView根本不支持object-fit
iOS Safari 15.4+、Chrome 88+、Firefox 89+才原生支持object-fit；Android 4.4 WebView、iOS Safari 13.3及更早版本会直接忽略该属性，退化成fill行为（即拉伸变形）。
- 检查目标环境：若需兼容老Android，必须降级，例如用伪元素+
padding-bottom模拟比例容器，再把video绝对定位进去 - UniApp、Vue Video Player等封装库中，
object-fit必须作用于原生video元素（如.video-js .vjs-tech），而不是外层div - 萤石云等RTMP/HLS流，首帧未加载完成时
object-fit会短暂失效，建议加preload="metadata"
poster图本身的质量控制——它不是“能显示就行”，而是必须和视频帧在宽高比、焦点位置、色彩风格上完全对齐。否则哪怕所有CSS都写对了，用户一看到封面和首帧之间的跳变，体验就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
