poster属性必须直接写在HTML的标签中且路径有效，JS动态修改无效；推荐用CSS覆盖方案替代原生poster以确保跨浏览器稳定性。
直接在 标签里写 poster 属性，路径必须有效、不能用 JS 动态改，否则多数浏览器不响应。
poster 必须写在 HTML 标签里，不是 JS 可赋值的属性
浏览器只认 这种写法。以下全部无效：
-
video.poster = 'new.jpg'—— DOM 属性更新不触发重绘 -
video.setAttribute('poster', 'new.jpg')—— Safari 和旧版 Android WebView 直接忽略 -
真正生效的只有 HTML 原生属性。如果封面要换，得靠清空 src → 改 poster → 重设 src → 调 load()，但会中断播放、清缓冲。
路径写错是“不显示”最常见原因
相对路径容易因当前 URL 层级解析失败，比如 HTML 在 /pages/video.html，图片在 /assets/cover.jpg，写成 poster="assets/cover.jpg" 就会 404；正确写法是 poster="/assets/cover.jpg"（以 / 开头）。
- 构建工具（Vite/Webpack）中，别硬编码
src/assets/cover.jpg，要用new URL('./cover.jpg', import.meta.url)获取运行时路径 - 避免
poster="cover.jpg"这类裸名，尤其在路由嵌套页里极易失效 - CDN 或防盗链环境下，检查 Network 面板是否返回 403；
poster加载失败不会报错，只会静默变空白
移动端 Safari 和安卓 WebView 的特殊表现
iOS Safari 15+ 默认懒加载 poster 图片，不加 preload="metadata" 可能压根不请求；某些安卓 WebView 对带查询参数的路径（如 cover.jpg?v=1）直接拒载。
- 推荐尺寸 ≥ 640px 宽，格式优先用
.jpg或.png，WebP 在老 iOS 上可能不渲染 - autoplay 一开，
poster几乎看不见——Chrome v78+ 在loadedmetadata后就隐藏，Safari 却坚持到用户点击才撤，行为不一致是常态 - 想点击封面播放？别给
绑 click，iOS 会静默拒绝；用绝对定位的video.play()
真正可靠的封面方案其实是 CSS + DOM 覆盖
原生 poster 太不可控，生产环境建议放弃纯依赖它：
- 用
- 监听
loadedmetadata事件后隐藏.cover，监听pause或ended再显示 - 上传新封面时，用
URL.createObjectURL(file)更新.cover.src，并记得及时URL.revokeObjectURL() - 这样既能响应点击、控制显隐时机，又绕开了所有浏览器对
poster的奇怪限制
最麻烦的从来不是怎么写 poster，而是怎么让同一张图在 Chrome、Safari、iOS、安卓上都“稳稳地停在那里”。原生属性只是起点，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
