video 的 poster 会拉伸变形是因为其默认按 contain 缩放且不响应 object-fit 或 aspect-ratio；需用 background 替代实现可控居中与缩放，并通过图层切换（如 .poster-overlay）保障多端兼容性。
video 的 poster 为什么拉伸变形
poster 图片本身不参与 CSS 布局，浏览器对它的渲染是固定的：默认按 contain 缩放、左上角对齐、不响应 object-fit 或 aspect-ratio。如果你的 video 元素设置了 width: 100%; height: 300px; 或父容器有 padding/border，而 poster 图片宽高比又和视频不一致（比如视频是 16:9，poster 是 4:3），就会出现上下/左右留白、只显示半张图、或被强行拉伸——这不是 bug，是原生行为。
用 CSS background 替代 poster 实现真正可控的封面
靠 poster 属性单打独斗做不到自适应居中+不拉伸。必须放弃“只设属性”的思路，改用背景图兜底：
- 给
video元素加内联样式：style="background: url(cover.jpg) center/cover no-repeat;" - 同时保留
poster属性（作为降级）：<video poster="cover.jpg" ...></video> - 移除
video上所有内联width/height，改用 CSS 控制尺寸（如max-width: 100%; aspect-ratio: 16/9;） - 如果要用
object-fit: cover，它只影响视频画面，不影响 poster；但 background 的center/cover才真正控制封面图
动态换封面时别碰 video.poster，改用图层切换
直接赋值 video.poster = 'new.jpg' 在 Chrome、Safari 中基本无效，浏览器不会重绘。真要换封面，推荐轻量方案：
- HTML 结构里用包裹容器：
<div class="video-wrapper"> <video></video><img class="poster-overlay" src=""> </div> - 初始时
.poster-overlay显示，video设opacity: 0 - 监听
loadedmetadata后，video淡入，.poster-overlay隐藏 - 用户上传新封面时，用
URL.createObjectURL(file)更新.poster-overlay.src，并确保调用URL.revokeObjectURL()清理旧地址
iOS Safari 的 poster 行为最不可信
它可能完全忽略 poster，尤其在 preload 策略不明确、图片体积 >200KB、或页面未触发用户交互时。不要等它“自动工作”：
- 保底用一张极小的
1×1.png作poster，至少避免黑屏 - 所有关键视觉逻辑（点击播放、封面居中、比例适配）必须基于
.poster-overlay图层，而不是依赖原生 poster 渲染 - 测试时务必真机连 Safari 开发者工具，看 Network 面板里 poster 图是否真的发出了请求、返回 200
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
