应禁用原生 poster，改用 CSS 覆盖层模拟：清空 poster 属性，通过 relative 容器内绝对定位的 img 或 ::before 元素，配合 object-fit: contain/cover 与 object-position: center center 实现不失真居中显示，并用 srcset 提供 2x 图适配 iOS 高清屏。
poster 图片被拉伸变形，怎么保持原始宽高比
直接设置 poster 属性时，浏览器默认用 object-fit: fill 拉满整个 <video> 区域，导致图片严重失真。这不是 bug，是规范行为——poster 本质是“占位图”，不自带缩放逻辑。
真正可控的方式是：禁用原生 poster 渲染，改用 CSS 覆盖层模拟。关键点：
- 给
<video>设置poster=""（清空值），避免原生渲染干扰 - 用
::before伪元素或同级<img>叠加在 video 上，配合object-fit: contain或cover - 必须显式设置
position: relative在 video 容器上，否则伪元素定位失效
<div class="video-container">
<video controls></video>
<img src="poster.jpg" alt="" class="poster-overlay">
</div>
<p>.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /<em> 16:9 </em>/
}
.poster-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
object-fit: contain; /<em> 或 cover，按需选 </em>/
width: 100%; height: 100%;
pointer-events: none;
}不同设备下 poster 图片居中对齐不稳定
常见现象是小屏上图片偏上、大屏上左右留白不对称——根源在于 object-fit: contain 默认对齐方式是 top left，不是居中。
解决只需加一行 CSS：
立即学习“前端免费学习笔记（深入）”；
-
object-position: center center必须和object-fit配合使用才生效 - 若用伪元素实现，
background-position: center更可靠（尤其兼容老 iOS） - 避免依赖
margin: auto+display: block，video 内部流式布局会破坏它
推荐写法（兼顾兼容性）：
.poster-overlay {
object-fit: contain;
object-position: center center;
/* 或退化方案： */
/* background: url(poster.jpg) no-repeat center center / contain; */
}poster 图片加载失败时如何 fallback 显示纯色背景
网络抖动或路径错误会导致 poster 空白，用户看到黑块或闪烁。HTML 原生无 fallback 机制，必须手动处理。
- 监听
load和error事件，但注意：<img>的error不冒泡，得单独绑定 - 不要等
onloadeddata（video 事件），它只管视频本身，不管 poster - 最简 fallback：CSS 设置
background-color作为底色，再叠 poster 图片
示例（无需 JS）：
.poster-overlay {
background-color: #000;
background-image: url(poster.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}这样即使图片 404，也会显示纯黑底——比空白更可控。
移动端 Safari 下 poster 图片模糊或分辨率不足
iOS Safari 对 poster 图片做自动压缩，尤其当原始图未适配设备像素比（dpr）时，文字/图标边缘发虚。
- 必须提供 2x 分辨率图，并用
srcset声明（哪怕只有一张） - 不要依赖
width/height属性控制尺寸，它会强制缩放，破坏清晰度 - 优先用 CSS 控制尺寸，让浏览器按实际像素渲染
正确做法：
<img src="poster@1x.jpg"
srcset="poster@1x.jpg 1x, poster@2x.jpg 2x"
class="poster-overlay">注意：Safari 对 srcset 的解析严格，路径必须完全匹配，且 @2x 图宽度应为 @1x 的两倍（如 1280×720 → 2560×1440）。
复杂点在于：同一张 poster 图要同时满足高清屏清晰、小屏加载快、大屏不模糊——没银弹，只能按设备宽度分发不同尺寸图，而不仅仅是 dpr 切换。
