object-fit直接控制poster比例，因其将poster视为video的可替换内容，与视频帧共用同一渲染通道；取值cover会裁剪填满，contain则完整显示留黑边，fill导致拉伸变形，且poster模糊常因尺寸不匹配或绝对定位错位所致。
object-fit 是控制视频封面（poster）比例的直接手段——它不区分视频帧还是 poster 图片，只要作用在 <video></video> 元素上，poster 就会按同样规则缩放。
为什么 poster 也会受 object-fit 影响
poster 属性加载的是静态图片，但它是 <video></video> 的内置替换内容，和视频帧一样属于“可替换元素”；浏览器将其视为同一渲染通道，因此所有 object-fit 取值对 poster 同样生效。
- 写
object-fit: cover，poster 会等比裁剪填满容器，可能切掉边缘 - 写
object-fit: contain，poster 完整显示，四周留黑边（适合教学类封面） - 没设
object-fit或设为fill，poster 强行拉伸，人像/文字易变形
常见错误：poster 模糊或错位
根本原因不是 CSS 写错，而是 poster 图片尺寸与视频原始分辨率不一致，再经 object-fit: cover 缩放后放大像素，导致模糊；或绝对定位下 poster 渲染位置偏移。
- 必须用和视频相同宽高比的 poster（例如 1920×1080 视频配 1920×1080 封面图）
- 避免在
<video></video>上同时用position: absolute和object-fit—— poster 的定位逻辑未同步更新，按钮和图片可能错开 - 如果用了
aspect-ratio: 16 / 9，poster 需按该比例裁切，否则contain下会出现非预期留白
如何让 poster 和首帧视觉一致
用户看到 poster 后，视频一播放就切换成首帧，若两者缩放方式不同，会产生“跳变感”。关键在于统一渲染逻辑。
- 不要给 poster 单独加 CSS 类，所有缩放行为只通过
<video></video>的object-fit控制 - 避免混用
width/heightHTML 属性和 CSSobject-fit—— 前者强制固有尺寸，后者被覆盖失效 - 移动端 Safari 旧版本（iOS 14.4 及更早）对 poster +
object-fit支持不稳定，可加preload="metadata"提前加载 poster 元信息
兼容性兜底时 poster 怎么处理
IE 或极老 Android 浏览器不支持 object-fit，此时 poster 会退化为原生 <img> 行为：按自身尺寸显示，不响应容器约束。
- 检测支持性：
if ('objectFit' in document.documentElement.style)，不支持则隐藏<video></video>，用<img>替代并手动设width/height - 不推荐用 background-image 模拟 poster —— 无法响应
playsinline或muted等 video 特性，交互断裂 - 真机测试必须包含 iOS 13/14 设备：这些系统下 poster 可能渲染延迟，需监听
loadeddata后再显式设置style.objectFit
真正难的不是写对 object-fit，而是让 poster、首帧、controls 在各种缩放模式下保持空间关系稳定——这要求你从一开始就用同一套尺寸约束贯穿整个视频生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
