HTML的poster属性显示手动指定的静态图，首帧截取则用JavaScript动态抓取；前者不依赖视频加载，后者需视频可解码定位；poster仅在未开始播放、未加载完或加载失败时生效。
有区别，而且区别很关键：HTML 的 poster 属性显示的是你**手动指定的一张静态图**，而“首帧截取”是**用 JavaScript 从视频里动态抓取某一帧生成图片**——前者不依赖视频加载，后者必须等视频能解码、能定位时间点。
poster 属性只在特定时机生效，不是“自动取第一帧”
poster 的行为非常明确：它只在视频尚未开始播放、尚未加载完成、或加载失败时显示。一旦视频元数据加载完毕（比如触发了 loadedmetadata），浏览器就可能开始准备渲染首帧；如果用户还没点播放，有些浏览器会悄悄把 poster 换成视频第一帧（尤其 iOS Safari），但这不是规范要求，而是实现差异。
常见误判点：
- 以为不设
poster就一定看到首帧 → 实际上部分安卓 WebView 或低版本 Chrome 可能直接黑屏 - 把
poster当作“封面管理入口” → 它只是个静态 fallback 图，无法响应视频内容变更 - 上传视频后更新了源文件，但忘了换
poster图 → 封面和实际内容脱节
用 canvas.drawImage() 截首帧必须绕过三个坑
想用 canvas 抓第一帧，不能一加载完就 draw，否则大概率截到黑块或空白。核心在于视频状态是否真正可读：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
loadeddata事件还不够，得等video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA -
currentTime = 0不一定安全，超短视频（seeked 后再 draw - Canvas 尺寸必须用
video.videoWidth/video.videoHeight，不是clientWidth—— 否则拉伸或裁剪失真 - 跨域视频需加
crossOrigin="anonymous"，否则drawImage报错 “Tainted canvases may not be exported”
移动端 poster 被忽略？其实是 autoplay 和 preload 在捣鬼
很多开发者发现 iPhone 上 poster 死活不显示，翻来覆去检查路径都没问题。真实原因通常是：
- 写了
autoplay或preload="auto"→ iOS 强制静音 autoplay，但会立刻尝试加载并渲染首帧，poster来不及露脸就消失了 - 视频格式没配
src属性 → 部分 Android 厂商定制浏览器无法正确识别编码，降级为黑屏+无 poster - 图片用了 WebP 格式 → iOS 14 以下不支持，得 fallback 到 JPG/PNG
最稳的组合是：poster 提供兜底图 + preload="metadata" 控制加载粒度 + JS 在 seeked 后截帧做二次校验。别指望一个属性解决所有场景，尤其是当视频源来自不同 CDN、编码参数不统一时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
