poster不等于首帧，它是静态占位图，不读取视频内容；真正首帧需通过loadeddata+seeked事件组合，用canvas按video.videoWidth/video.videoHeight绘制。
不能。HTML poster 属性和“首帧截取”是两件完全独立的事，强行混用反而容易出错。
为什么 poster 不等于首帧
poster 是静态图片占位符，只在视频未加载、未播放或加载失败时显示；它不读取视频内容，也不触发解码。浏览器根本不会去解析视频文件来提取第一帧——哪怕你把 poster 设为空字符串或删掉，页面上显示的“第一帧”也来自视频解码器渲染的首帧画面（可能黑、可能花、可能延迟数秒），不是 poster 控制的。
- 常见错误现象：
poster图片一闪而过、播放后仍残留、移动端不显示、和实际首帧明显不一致 - 本质原因：不同浏览器对
poster的渲染时机和 fallback 行为不统一，iOS Safari 尤其倾向忽略它直接展示解码帧 - 路径/尺寸/格式等优化只影响
poster本身加载体验，对视频首帧内容零影响
loadeddata + seeked 才是首帧截取的关键事件组合
想拿到真正可展示的首帧图像，必须等视频元数据就绪并完成一次定位。只监听 loadeddata 不够稳定，很多情况下 video.videoWidth 仍是 0 或得到黑帧；seeked 才代表时间轴已就位、当前帧可被 canvas 安全绘制。
- 必须按顺序触发：
video.currentTime = 0→ 等待seeked→ 再调用drawImage - 不要依赖
autoplay：它可能被浏览器策略阻止，且与首帧截取无逻辑关联 - 跨域视频必须加
crossOrigin="anonymous"，否则 canvas 会因污染拒绝导出toDataURL - 超时保护建议设为 3s：部分低性能设备或大体积视频可能卡在元数据加载阶段
Canvas 绘制时容易被忽略的尺寸陷阱
直接用 video.width/video.height 设置 canvas 尺寸是错的——这两个属性是 HTML 属性值（可能为 0 或被 CSS 拉伸），真实分辨率得看 video.videoWidth 和 video.videoHeight。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
canvas.width = video.width; canvas.height = video.height; - 正确写法：
canvas.width = video.videoWidth; canvas.height = video.videoHeight; - 如果视频未设置宽高属性，
video.videoWidth可能为 0，需确保loadeddata已触发再读取 - 缩略图场景可缩放绘制（如
ctx.drawImage(video, 0, 0, w/2, h/2)），但 canvas 自身尺寸仍需匹配原始分辨率，否则模糊或裁切
生成的 base64 封面要不要回填到 poster？
可以，但仅限于“用户上传本地视频”的场景。网络视频生成的 base64 太长，塞进 poster 属性会导致 HTML 体积膨胀、首次渲染阻塞，且无法缓存。
- 本地上传流程中，用
URL.createObjectURL(file)加载视频 → 截取 → 得到 base64 →video.poster = base64String是合理闭环 - 网络视频应将 base64 传给后端存为独立图片资源，返回 URL 后赋值给
poster，避免前端重复生成 - 注意 base64 图片 MIME 类型：用
image/jpeg比image/png更小，质量损失可接受
最常被绕过的点是：以为 poster 能“强制覆盖”首帧，其实它连视频解码器的门都敲不开。真正要控制封面，就得亲手把帧画出来——而且得在对的时机、用对的尺寸、处理好跨域，少一个环节，canvas 就给你一张黑图或报错。
