poster仅在视频未播放、元数据未加载或加载失败时生效，loadedmetadata触发后浏览器可能立即用首帧覆盖；首帧截取须等seeked事件，而非loadeddata。
HTML 的 poster 属性和 JavaScript 截取首帧没有逻辑依赖关系，但实际使用中必须协同——因为浏览器会悄悄“替换”它们，而你无法阻止。
poster 不是封面生成器，只是兜底占位图
poster 只在三种情况下生效：视频未开始播放、元数据（loadedmetadata）尚未加载完成、或加载失败。一旦 loadedmetadata 触发，浏览器就可能立刻准备渲染第一帧；iOS Safari 甚至会在用户还没点播放时，直接用解码出的第一帧覆盖 poster——这不是 bug，是实现行为。
- 如果视频编码时 GOP 很长（比如关键帧在第 2 秒），
currentTime = 0实际定位到的是上一个 I 帧，可能为空白或黑块 -
poster图片 404 不报错，页面只会静默变黑或跳到首帧 - 跨域视频若没配 CORS，移动端 Safari 可能连
poster都不显示（哪怕图片地址本身可访问）
首帧截取必须等 seeked，不能只靠 loadeddata
监听 loadeddata 就 drawImage，大概率截出黑图。真正安全的时机链是：loadedmetadata → 设置 currentTime = 0 → 等待 seeked 事件 → 再 drawImage。
-
seeked表示时间定位已完成，且视频已解码到该位置（哪怕只是 P/B 帧，也比loadeddata时更可靠） - 超短视频（currentTime = 0 仍可能不准，可尝试
currentTime = 0.1后再等seeked - 跨域视频必须加
crossOrigin="anonymous"，否则drawImage报错 “Tainted canvases may not be exported”
preload="metadata" 是控制加载粒度的关键开关
preload="auto" 会让 iOS 强制静音 autoplay，并立即加载并尝试渲染首帧——poster 根本来不及展示就消失了。而 preload="none" 又会导致首帧截取失败（没加载元数据）。
-
preload="metadata"是最稳选择：只拉取时长、宽高、编码信息，不加载视频帧数据 - 配合
controls或手动播放逻辑，可确保用户看到poster，同时为 JS 截帧留出可控时机 - CDN 返回的视频若启用了 range 请求优化，
preload="metadata"能显著减少首屏流量
真正难处理的不是代码怎么写，而是不同设备对“第一帧”的定义不一致：有的按编码关键帧，有的按解码画面，有的还受硬件加速影响。别指望一次设置适配所有视频源，尤其当它们来自多个 CDN、编码参数混杂时——poster + preload="metadata" + seeked 后截帧，才是目前最可控的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
