优先使用 poster 属性，它轻量可靠、兼容性好；js 截帧需设 currenttime=0.1 并监听 seeked 事件，避免黑屏或 securityerror；导出选 png（要透明）或 jpg（小体积），注意兼容性。
直接用 poster 属性就行，别一上来就写 JS 截帧
绝大多数场景下，poster 是最轻量、最可靠的选择。它不依赖 JS 执行时机、不触发跨域限制、不卡在 loadeddata 事件里白屏等待，浏览器原生支持，移动端兼容也稳定。
常见错误是：视频还没加载完就急着调 drawImage，结果 canvas 画出来是黑的或空白；或者没设 crossOrigin="anonymous"，本地文件或跨域视频直接报错 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'。
建议做法：
- 优先用
<video poster="cover.jpg"></video>，图片路径确保可访问（相对路径注意当前 HTML 位置） - 封面图尺寸必须和视频原始分辨率一致，否则 iOS Safari 会拉伸变形
- 如果视频带黑边（letterbox），封面图也要保留相同上下/左右黑边，否则播放瞬间画面“跳一下”
- 不要指望
poster在所有安卓 WebView 里都生效——部分旧版 UC、QQ 浏览器会忽略它，直接显示首帧，这是已知限制
currentTime = 0 不等于第一帧，得设成 0.1 或监听 seeked
想用 JS 截首帧时，很多人写 video.currentTime = 0 然后立刻 drawImage，但实际多数编码格式（尤其 H.264）的 IDR 帧不在时间轴 0ms，而是从 0.03–0.1s 开始。直接读 0 会拿到解码失败的空画面。
实操要点：
- 设
video.currentTime = 0.1比0更稳妥，尤其对 MP4 封装的 H.264 视频 - 必须监听
seeked事件（不是loadeddata），等 seek 完成再绘图，否则 canvas 内容不可靠 - 若视频源是 blob URL（如用户上传），需确保
URL.createObjectURL(file)后再赋值给src，且不能提前释放 blob - 避免在
canplay或canplaythrough里截帧——这些事件只表示“能播了”，不代表 seek 已就绪
canvas 截帧导出 PNG 还是 JPG？看要不要透明通道和压缩容忍度
canvas.toDataURL('image/png') 和 toDataURL('image/jpeg') 行为差异明显，不是随便选一个就行。
关键区别：
- PNG 支持 alpha 通道，但体积大（同等质量下比 JPG 大 2–3 倍），且某些老旧 Android 设备不支持 PNG 的
toDataURL输出 - JPG 不支持透明，但体积小、兼容性好；加
quality参数（如0.8）能控大小，但注意 Safari 不支持该参数，会忽略 - 如果视频本身有黑边或纯色背景，用 JPG 足够；若要保留毛玻璃/渐变边缘效果，PNG 更准
- 别用
image/webp——Firefox 旧版本、部分国产浏览器不识别，会返回空字符串
移动端真机调试时，poster 失效大概率是路径或 MIME 类型问题
开发时在桌面 Chrome 看得好好的，一上真机（尤其 iOS）poster 就不显示，90% 是这两个原因：
- 图片路径是相对路径，但页面由 file:// 协议打开（比如 Cordova 或微信内嵌页），导致图片 404；改用 base64 内联或绝对路径可绕过
- 服务器没配对
.jpg或.png的正确 MIME 类型（如返回text/plain），iOS Safari 会直接拒载封面图 - 微信内置浏览器对
poster支持不稳定，有时需要同时设preload="metadata"才触发加载 - 别依赖“视频自动播第一帧当封面”——iOS 微信里视频默认静音且不自动播，
poster又挂了，结果就是一片灰
复杂点在于：同一份代码，在 iOS Safari、Android Chrome、微信、飞书、钉钉里表现可能全不同。最省事的兜底方案，是先设 poster，再用 JS 截帧 fallback 到 img 覆盖其上，但得控制好 DOM 插入时机，别闪两次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
