video的poster属性是手动指定的静态占位图，仅在视频未加载、未播放或加载失败时显示，不自动截取首帧；常见失效原因包括首帧快速渲染、iOS Safari兼容性差、路径404、跨域限制、preload设置不当及格式不支持。
video 的 poster 属性不是“自动截首帧”，而是你手动指定的一张静态占位图——它只在视频尚未加载、未播放、或加载失败时出现；一旦视频开始渲染画面，它就立刻消失。
为什么设置了 poster 却看不到封面？
这不是代码写错了，而是浏览器根本没走到“显示 poster”的阶段：
- 视频
src已触发加载，且首帧解码成功（尤其在preload="auto"或未设preload时），浏览器直接跳过poster显示第一帧 - iOS Safari 对
poster支持不稳定，即使路径正确、图片可访问，也可能静默忽略，显示黑屏 - 图片路径 404 或跨域请求被拒（如 CDN 未配 CORS），浏览器不报错，但 fallback 到首帧或空白
- 用了
autoplay且用户交互已满足（比如页面在 tab 中被激活），poster可能只闪现几毫秒，肉眼不可见
poster 路径和格式怎么写才稳？
别信“相对路径随便写”，它严格以 HTML 文件所在位置为基准，不是 JS 或 CSS 所在目录：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
.jpg或.png，避免.webp（旧版 Safari 不支持） - 路径写成
poster="/assets/cover.jpg"（绝对路径）或poster="cover.jpg"（同目录），别用./cover.jpg（部分浏览器解析异常） - 不支持 base64 内联（
poster="data:image/png;base64,..."会 404） - 尺寸建议与视频宽高比一致（如 16:9 视频配 1280×720 图），否则可能被拉伸（
object-fit对poster无效）
如何让 poster 真的“必现”？
靠单设 poster 不够，得配合其他属性控制加载节奏：
- 显式加
preload="metadata"：确保封面图加载，又不提前下载整段视频 - 去掉
autoplay，改用 JS 监听canplay后再调用play()，避免封面被首帧覆盖 - 本地开发用
file://协议时，部分浏览器禁用poster加载，务必切到本地服务器（如python3 -m http.server）测试 - 若需动态换封面，不能只改
video.poster = "new.jpg"，必须跟video.load()，否则不刷新（注意：这会清空缓冲、中断播放）
移动端 iOS Safari 的兼容性怎么兜底？
这是最常被忽略的点：iOS Safari 在某些系统版本中会彻底忽略 poster，哪怕路径、格式、preload 都对。此时没有银弹，只有两个务实选择：
- 用一个纯色
.png（比如 1×1 像素灰色图）作为保底poster，至少避免黑屏 - 用绝对定位的
上，初始display: block，监听playing事件后display: none；暂停时再显示——这样完全绕过浏览器对poster的实现差异
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
