poster属性必须写在开始标签内，不可用js动态设置；图片路径需有效且以html文件为基准解析，否则静默空白；chrome在loadedmetadata后隐藏，safari则持续显示至播放，跨浏览器需css背景+dom覆盖方案兜底。
poster 属性必须写在 <video></video> 开始标签里，且图片 URL 必须可访问、格式被支持、路径解析正确——否则它不会报错，只会静默显示空白。
poster 属性只能写在
浏览器不把 poster 当作可响应的 DOM 属性。你写 video.poster = "cover.jpg" 或 video.setAttribute('poster', 'cover.jpg')，在 Safari 和多数安卓 WebView 中完全无效。它只认 HTML 原生属性：
- ✅ 正确：
<video poster="cover.jpg"></video> - ❌ 错误：
<video><source poster="cover.jpg"></source></video>（<source></source>不支持该属性） - ❌ 错误：
video.src = 'video.mp4'; video.poster = 'new.jpg';（不会重绘封面）
动态换封面的唯一可靠路径是：清空 src → 设新 poster → 恢复 src → 调用 load()。但会中断播放、清空缓冲，代价高。
图片路径和格式稍有偏差，poster 就会消失而不提示
路径不是“看着对就行”，而是以 HTML 文件所在位置为基准解析。比如 HTML 在 /pages/detail.html，图在 /assets/cover.jpg，就得写 poster="/assets/cover.jpg"，写成 poster="assets/cover.jpg" 很可能 404。
- ⚠️ 图片返回 403（如 CDN 防盗链未配 CORS）或 Content-Type 错（如服务器返回
text/plain），浏览器照样不报错，只留白 - ⚠️
data:image/png;base64,...在旧版 Android WebView 和 iOS Safari 中常被忽略 - ✅ 推荐用
.jpg或.png，尺寸控制在 100–300KB，宽高比尽量匹配视频（如 16:9）
Chrome 和 Safari 对 poster 的显示逻辑根本不同
Chrome v78+ 在 loadedmetadata 事件触发后就隐藏 poster；Safari 则一直显示到用户点击播放或调用 play() 才替换。这意味着同一段代码，在 Chrome 看是“一闪而过”，在 Safari 看是“始终存在”。
- 如果你需要跨浏览器统一封面体验，不能只靠
poster - 更稳妥的做法是：用 CSS
background-image给<video></video>设底图 + 监听loadedmetadata后手动插入一层<img>覆盖层，并在play或timeupdate触发时移除 - 别设
preload="none"来强留poster——iOS Safari 可能直接忽略，且首播延迟明显
移动端 Safari 的 poster 加载有隐性门槛
iOS Safari（尤其 15–16）对 poster 图片有懒加载策略：若没显式加 preload="metadata"，大图（>200KB）可能根本不发起请求；若视频设了 autoplay muted 且无用户手势，poster 也可能被跳过。
- ✅ 必加：
<video preload="metadata" playsinline webkit-playsinline poster="cover.jpg"></video> - ✅ 封面图宽度建议 ≥ 640px，否则 iOS Safari 渲染异常
- ⚠️ 即使所有配置都对，某些设备仍会在首帧解码完成后“闪一下”再覆盖 —— 这是播放器优化行为，不是 bug
真正难的不是写对那一行 poster="xxx"，而是在 preload 策略、CORS 配置、base64 兼容性、iOS 懒加载阈值和首帧渲染时机之间，找到那个刚好能被所有环境同时接受的交集点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
