poster属性仅在video未触发任何播放行为时生效，一旦开始加载或解码即隐藏；需用可访问的静态图片（推荐jpg/png），避免data url和相对路径陷阱，动态切换须调用load()重置。
poster 属性能解决视频首帧黑屏或加载延迟时的视觉空白，但直接写路径常踩坑——它只在视频未播放前生效，且不支持动态切换。
poster 属性什么时候起作用
它只在 <video></video> 元素尚未触发任何播放行为（包括自动播放、用户点击、JS 调用 play()）时显示。一旦视频开始加载或解码，哪怕还没出画面，poster 就会立即隐藏——不是等第一帧渲染出来才消失。
- 页面加载完成、视频
readyState === 0（HAVE_NOTHING）时，poster 可见 - 视频触发
loadstart或canplay后，poster 自动移除，无论是否真有画面 - 如果视频因跨域、CORS 或 MIME 类型错误无法加载，poster 会一直挂着，但控制台可能没报错
如何设置 poster 路径才可靠
路径必须指向一张真实可访问、尺寸适配的静态图片，且需注意加载时机和资源可用性。
- 优先用绝对路径或相对于 HTML 文件的相对路径，避免依赖当前 JS 执行位置
- 图片格式推荐
.jpg或.png，WebP 在旧版 Safari 中不被poster支持 - 不要用 data URL：部分 Android WebView 和 iOS Safari 会忽略 data URL 形式的
poster - 检查图片 HTTP 状态码——404 或 403 会导致 poster 不显示，且无任何提示
poster 和 JS 控制封面的边界在哪
poster 是纯 HTML 层的占位机制，不能通过 JS 修改后重新激活。比如你用 JS 动态设置 video.poster = 'new.jpg'，只有在视频尚未加载过时才生效；若已触发过 loadstart，新值不会还原 poster 显示。
- 想实现“重播时重显封面”，得重置视频状态：
video.load()（会清空当前缓冲并重发请求） - 想完全接管封面逻辑（比如加按钮、文字层、响应式缩放），建议用 CSS 遮罩层 +
visibility: hidden控制原生 poster，而非依赖它做交互载体 -
poster图片不会响应click事件——点击区域实际是<video></video>元素本身，需监听 video 的 click 并自行判断是否处于未播放态
真正麻烦的是混合场景：自动播放失败、静音策略介入、iOS 上非用户手势触发的播放限制……这些会让 poster 的存在感变得很微妙。别把它当 UI 组件用，它只是个轻量级 fallback 视觉钩子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
