Safari 中 video poster 不显示是因默认跳过加载阶段且禁用 file:// 协议下的 poster 加载，需设 preload="metadata" 并通过 HTTP 服务访问；动态设置 poster 属性无效，须调用 load() 或用 img 覆盖；移动端点击无反应是因平台禁止无手势 play()；poster 闪退需结合 preload、CSS background 和 JS 覆盖兜底。
video poster 属性为什么在 Safari 里完全不显示
不是 Safari 不支持 poster，而是它默认跳过加载阶段：当 preload 没设或设为 "auto" 时，Safari（尤其 macOS Monterey+ / iOS 15+）可能直接解码首帧，压根不发 poster 请求；若用了 file:// 协议打开 HTML，它会直接禁用 poster 加载——这是安全策略，不是 bug。
必须做两件事才能让 Safari “看见” poster：
- 显式加
preload="metadata"：只加载元数据 + poster 图，不下载视频主体 - 本地开发必须起 HTTP 服务，比如终端运行
python3 -m http.server 8000，然后访问http://localhost:8000/
别信“路径没错就该显示”，先打开 Network 面板过滤 Img，确认 poster 请求是否发出、返回 200、Content-Type 是 image/jpeg 或 image/png。
动态设置 video.poster = 'xxx.jpg' 为什么无效
浏览器不会因 JS 赋值而重绘 poster，尤其在 Chrome 和 Safari 中，video.poster = 'new.jpg' 后页面毫无反应——这不是延迟，是根本不触发渲染更新。
立即学习“前端免费学习笔记（深入）”；
正确做法只有两个：
- 改完
poster后必须立刻调video.load()，但注意：这会清空缓冲、中断播放、重新发起所有资源请求 - 更稳妥的替代方案：用绝对定位的
<img>盖在<video>上，监听playing事件后display: none，暂停或 ended 时再显示
React/Vue 等框架中直接绑定 :poster 或 v-bind:poster 同样无效，本质还是动态赋值问题。
移动端点击 poster 没反应是兼容性问题吗
不是兼容性问题，是平台强制策略：iOS Safari 和多数安卓 WebView 明确禁止在无用户手势前提下激活视频交互。给 <video poster=""> 绑 onclick 或监听 touchstart，事件能触发，但 play() 必然失败并抛出 NotAllowedError。
可行路径只有：
- 把播放控制权交给用户可见按钮（比如一个带文字的
<button>），点击后再调video.play() - 用
muted+autoplay绕过静音限制（仅限用户已与页面有交互后） - 放弃“点击 poster 播放”设计，改为 poster 上叠加半透明播放图标 + 独立按钮
iOS Safari 中 poster 闪一下就消失怎么稳住
“一闪就没了”大概率不是图片没加载完，而是浏览器在 loadedmetadata 触发后立刻切到第一帧——Chrome v78+ 开始就这么干，Safari 更激进。
真正能落地的稳定策略是组合使用：
- HTML 中静态写死
poster="/cover.jpg"，配合preload="metadata"和移除autoplay - CSS 备份：
video { background: url(/cover.jpg) center/cover; }，poster 隐藏后视觉不断层 - JS 补位：监听
loadedmetadata，手动插入一层<img class="poster-overlay">覆盖，再监听play或timeupdate移除
最常被忽略的一点：iOS Safari 某些版本（如 iOS 15.4–16.2）会彻底忽略 poster，哪怕所有配置都对。这时候靠 background 或覆盖层兜底，不是妥协，是必须。
