html视频标签不直接支持关键帧截图，但可通过poster属性提取内嵌首帧或结合seek+seeked事件与canvas绘制实现高质量截图；需注意canvas尺寸匹配、cors配置及导出格式选择。
HTML视频标签本身不直接提供“关键帧截图”能力，关键帧（IDR帧）是视频编码层面的概念，浏览器不暴露帧类型信息。但可以通过合理时机控制+Canvas绘制，稳定捕获到接近关键帧的画面，实现业务意义上的“高质量首帧/指定帧截图”。核心不是识别关键帧，而是避开黑帧、未解码帧，选对时间点。
优先用 poster 属性截首帧
多数场景下，不需要 JS 截图。直接给 <video></video> 设置 poster 属性即可显示首帧缩略图：
- 它由浏览器自动提取视频文件内嵌的封面帧（通常是第一个 IDR 帧），无需 JS、无跨域风险、不依赖加载状态
- 写法：
<video poster="cover.jpg" src="video.mp4"></video> - 如果视频没内嵌 poster，可提前用 FFmpeg 提取首帧生成 JPG 并手动指定
必须用 Canvas 截图时：关键在 seek + seeked 事件
想截任意时间点（比如用户拖动后停下的画面），不能在 loadeddata 或 canplay 后立刻 drawImage，而要主动 seek 并等 seeked 触发：
-
video.currentTime = 0.1比= 0更可靠——H.264/MP4 的首个可解码帧通常在 0.03–0.1 秒区间 - 必须监听
seeked事件，它表示 seek 完成且画面数据已就绪；seeking只表示开始寻址，不可靠 - 示例片段：
video.currentTime = 0.1;<br>video.addEventListener('seeked', () => {<br> ctx.drawImage(video, 0, 0, canvas.width, canvas.height);<br>}, { once: true });
画布尺寸与导出格式要匹配原始分辨率
截图模糊或变形，往往是因为 canvas 尺寸设错了：
- 用
video.videoWidth和video.videoHeight设置 canvas 宽高，不是clientWidth/clientHeight（后者是 CSS 显示尺寸，会拉伸） - 导出优先用
canvas.toBlob()而非toDataURL()：内存占用小、iOS 兼容性好、可直接赋值给 poster - 无透明需求时选
'image/jpeg'+ 质量参数0.9；需 alpha 通道才用'image/png'
跨域视频必须配 CORS，否则 canvas 污染
从 CDN、OSS 或其他域名加载的视频，若未正确配置跨域，drawImage 会导致 canvas “被污染”，后续 toDataURL/toBlob 报错或返回空字符串：
- HTML 中加
crossorigin="anonymous" - 服务端响应头必须包含
Access-Control-Allow-Origin: *（或具体域名） - 仅写
crossorigin不配服务端头，等于没配 - 本地 file:// 协议打开时，部分浏览器会拒绝跨域请求，建议用本地服务器预览
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
