poster属性仅在视频未加载、未播放或加载失败时显示静态占位图，需手动提供有效URL图片，不支持自动截帧；常见问题源于路径错误、格式兼容性（如WebP在旧Safari中不支持）、CSS覆盖尺寸或色域/滤镜不匹配导致的视觉跳变。
video 标签的 poster 属性到底起什么作用
它只在视频尚未加载、未开始播放、或加载失败时显示——不是“首帧截图”，也不是“自动截取第一帧”。浏览器不会解析视频内容去抠图，poster 是纯静态图片，必须你手动提供。
常见错误现象：poster 不显示，但视频能播；或者显示了却模糊/拉伸/错位。原因通常是路径不对、图片格式不被支持（比如 WebP 在旧 Safari 中不认），或 CSS 强制覆盖了默认尺寸。
-
poster值必须是有效 URL，相对路径以 HTML 文件为基准，不是 JS 或 CSS 所在位置 - 推荐用
.jpg或.png，避免.webp（iOS 13 之前 Safari 不支持） - 图片宽高比最好和
video元素的宽高比一致，否则object-fit: contain（默认行为）会留白
怎么让 poster 图和视频画面看起来“无缝衔接”
关键不是技术，是制作：你得用视频第一帧导出一张图，且导出参数要匹配播放时的渲染效果。比如视频是 H.264 + BT.709 色域，海报图也得用相同色彩空间导出，否则亮部/肤色会突兀跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ffmpeg截第一帧：ffmpeg -i input.mp4 -ss 00:00:00.000 -vframes 1 -q:v 2 poster.jpg - 导出时关闭所有锐化、对比度增强；如果视频加了滤镜，海报图也要套同款 LUT 再导出
- 检查视频是否带黑边（letterbox），如果有，海报图也得保留同样黑边，否则播放瞬间会“缩一下”
移动端 iOS Safari 的 poster 加载异常问题
iOS Safari（尤其是 iOS 15–16）有个经典坑：如果 video 标签没设 preload="metadata"，且 poster 图体积稍大（比如 >200KB），它可能完全不显示，直到用户点播放才闪一下。
这不是 bug，是 Safari 的懒加载策略：它把 poster 当作“非关键资源”，等需要渲染控件时才拉取。解决方法很直接：
- 给
video加上preload="metadata"（注意不是"auto"，后者会预加载音频/视频流，浪费流量） - 把
poster图压缩到 - 别用
background-image模拟 poster —— 这样会绕过原生控件逻辑，导致全屏按钮、音量条等行为异常
用 JavaScript 动态设置 poster 为什么有时无效
因为 poster 是 HTML 属性，不是 DOM 属性。直接改 video.poster = 'new.jpg' 可能不触发重绘，尤其在视频已加载元数据之后。
真正可靠的写法是：
- 先移除原
poster：video.removeAttribute('poster') - 再设新地址：
video.setAttribute('poster', 'new.jpg') - 如果视频已
loadedmetadata，还需手动触发一次重绘，比如video.style.opacity = 0.99; setTimeout(() => video.style.opacity = 1, 10)
更稳妥的做法其实是：一开始就用 JS 创建 video 元素，再 setAttribute，避开初始渲染阶段的状态竞争。
