poster属性仅在<video>标签中作为HTML原生属性生效，必须直接写在开始标签内（如<video poster="cover.jpg">），不可通过JS动态设置或置于<source>标签中，且图片路径需有效、尺寸匹配宽高比，否则显示空白。
poster 属性只在 <video> 标签里生效
它不是 CSS 属性，也不能用 JavaScript 动态设置成 DOM 属性（比如 video.poster = "..." 会失败）。必须写在 HTML 的 <video> 开始标签里，作为原生属性存在。
常见错误是把它当成 class 或 style 一类的通用属性，或者试图用 JS 修改——浏览器压根不响应。
- 正确写法：
<video poster="cover.jpg"></video> - 错误写法：
<video><source poster="cover.jpg"></video>（<source>不支持poster） - 错误写法：
video.setAttribute('poster', 'cover.jpg')（多数浏览器忽略，尤其 Safari）
图片路径必须可访问，且尺寸建议匹配视频宽高比
poster 图片加载失败时，视频区域会显示空白或浏览器默认灰块，不会报错，也不提示——容易误以为代码没生效。
推荐做法是把图片放在和 HTML 同目录，或使用相对/绝对路径验证是否 404；如果视频是 16:9，封面图也尽量用 1280×720 或 1920×1080 这类比例，避免拉伸变形。
立即学习“前端免费学习笔记（深入）”；
- 能用：
poster="images/thumb.webp"（路径存在、格式被支持） - 可能失效：
poster="/assets/cover.png?v=1"（带查询参数时部分旧版 Android WebView 会拒载） - 慎用：
poster="data:image/png;base64,..."（Base64 太长会导致 HTML 体积激增，且无法缓存）
移动端 Safari 和部分安卓 WebView 对 poster 加载有延迟或跳过行为
即使 HTML 写对了、图片路径也没问题，某些设备仍会在首帧视频画面出现后才“闪一下”封面，甚至直接跳过——这不是 bug，而是播放器优化策略：为抢首发帧，提前解码视频流，覆盖了 poster。
缓解方式有限，但可尝试：
- 确保视频文件开头含关键帧（用
ffmpeg -ss 0 -i input.mp4 -c:v libx264 -vf "fps=1" -vframes 1 cover.jpg验证首帧是否可用） - 加
preload="metadata"，让浏览器只加载元信息而非视频数据，给 poster 更多显示时间 - 避免同时设
autoplay和poster——iOS 会强制静音且常跳过封面
没有 poster 时，不要指望浏览器自动截取第一帧
HTML 标准没规定浏览器必须从视频里抽帧当封面。Chrome、Firefox 均不实现该行为；Safari 在某些版本曾短暂支持，但已移除。留空 poster 就是纯黑/灰背景，不是“智能生成”。
如果你依赖自动化方案，得自己用 FFmpeg 提前导出首帧：ffmpeg -i video.mp4 -vframes 1 -q:v 2 poster.jpg，再手动填进 poster 属性。
别信“加个 controls 就能显示缩略图”这种说法——那是控件面板里的小预览，和 poster 完全无关。
