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