video 的 poster 图片偏左或拉伸变形是因为其默认按左上角对齐且缩放方式为 contain，而 object-fit、padding/border 等会使其与视频画面错位；需用 background-image 兜底、避免内联宽高、正确设置 aspect-ratio 位置，并注意 iOS Safari 对格式、preload 和动态更新的限制。
video 的 poster 图片为什么总是偏左或拉伸变形
poster 本身不参与 CSS 布局计算，它默认按“内容区域左上角对齐”，且缩放方式固定为 contain（保持宽高比、完整显示）。如果 video 元素被设置了 object-fit: cover 或容器有 padding/border，poster 就会和实际视频画面错位——这不是 bug，是浏览器原生行为。
常见现象：封面图只显示左半边、上下留白过大、在不同设备上位置飘移。
- 确保
video元素自身没有内联width/height，否则会干扰max-width和aspect-ratio计算 - 给
video加object-fit: cover时，poster 不会同步应用该规则；必须用 CSS 背景图兜底：video { background: url(cover.jpg) center/cover no-repeat; } - 若用
aspect-ratio: 16 / 9，务必设在video的直接父容器上，而不是video自身（poster 不响应该属性） - iOS Safari 对 poster 尺寸敏感：宽度
如何让 poster 在不同屏幕下始终居中且不拉伸
靠 poster 属性单打独斗做不到真正居中适配。必须组合三件事：CSS 控制容器、背景图 fallback、JS 监听加载状态。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器用 Flex 居中：
display: flex; justify-content: center; align-items: center; min-height: 100vh; -
video设max-width: 100%; height: auto; aspect-ratio: 16 / 9;，并加background: url(cover.jpg) center/cover no-repeat; - 监听
loadedmetadata事件，在 Chrome 中手动隐藏背景图（避免与首帧重叠）：video.addEventListener('loadedmetadata', () => video.style.background = 'none'); - 别用
preload="none"——它会让 poster 显示更久，但首次播放延迟严重，iOS Safari 还可能忽略它
动态换 poster 时页面不刷新怎么办
直接赋值 video.poster = 'new.jpg' 在 Chrome、Firefox、Safari 中基本无效。DOM 属性更新不会触发重绘，浏览器认为“只是改了个字符串”。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方式是触发重新加载：
video.src = '';→video.poster = 'new.jpg';→video.src = 'video.mp4';→video.load(); - 这个过程会清空缓冲、中断播放、触发一次完整 HTTP 请求，慎用于频繁切换场景
- 更轻量的替代方案：用绝对定位的
<img>覆盖在video上，初始display: block，监听playing后display: none，暂停时再显示 - 记得调用
URL.revokeObjectURL()清理上传生成的临时地址，否则内存泄漏
iOS Safari 上 poster 一闪就消失或根本不显示
这不是配置错误，是 iOS WebKit 的策略性限制：它可能跳过 poster 加载、直接渲染首帧，尤其当 autoplay muted 存在或网络较快时。
- 强制加载元数据而非整个视频：
preload="metadata"是底线，不加这个，iOS 可能根本不去请求 poster 图 - poster 图不能是 WebP（iOS Safari 拒绝解析），也不能是 data URL（静默失败），必须是可直链的 PNG/JPEG
- 兜底方案不是“修 poster”，而是放弃依赖它：用
<div class="video-wrapper"><video></video><img class="poster-overlay" src="cover.jpg"></div>，用 JS 控制显隐 - 极小保底图（如 1×1 灰色 PNG）能防止黑屏，但别指望它“好看”——这是 iOS 的兼容性现实
poster="xxx.jpg"，而在判断此刻用户看到的是 poster、首帧、黑屏，还是 loading 动画。你得把 poster 当作一个需要主动管理的状态，而不是 HTML 里一个静态字段。 
