直接设置 <video> 的 poster 属性即可生效，但仅在视频未播放且首帧未加载时显示；若资源加载失败或格式不支持则静默失效，无 fallback。
video 标签的 poster 属性怎么设才生效
直接给 <video> 加 poster 属性是最简单的方式，但它只在视频未播放、且尚未加载首帧时显示——如果视频资源本身加载失败，或者浏览器不支持该封面格式，poster 就会静默失效，连 fallback 都没有。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
poster指向的图片路径可访问，推荐用绝对路径或相对当前 HTML 的明确路径，比如poster="assets/cover.jpg" - 图片尺寸无需严格匹配视频宽高比，但浏览器会拉伸填充；若想避免变形，CSS 中加
object-fit: cover到<video>元素上 - 不要依赖
poster做交互入口（比如点击播放），因为移动端部分浏览器（如 iOS Safari）在未触发用户手势前会禁用自动加载，导致封面显示但点不动 - 常见错误：把 base64 图片字符串直接塞进
poster，某些旧版 Android WebView 会解析失败；稳妥起见，优先用外链图片
上传封面图后如何实时预览并绑定到 video
用户上传一张新封面，你得立刻让它出现在 <video> 上，而不是等刷新或重新设置 src。核心是绕过 poster 的静态限制，用 CSS 覆盖层模拟封面。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML 结构里，把
<video>和一个<img>放进同一容器，<img>初始display: none，视频加载完成后再隐藏它 - 监听
input[type="file"]的change事件，用URL.createObjectURL(file)创建临时地址，赋给预览<img>的src - 别直接改
<video>的poster属性来“更新”——很多浏览器不重绘；而是控制图层显隐：<img>显示时，<video>设opacity: 0或visibility: hidden - 注意内存泄漏：每次调用
createObjectURL后，记得在切换封面或页面卸载前，用URL.revokeObjectURL()清掉旧地址
移动端 video 封面点击无响应的真因和绕过方式
iOS Safari 和部分安卓 WebView 对 <video> 的交互有硬性限制：没经过用户真实点击（touchstart/mousedown），就不能触发播放、也不能让 poster 响应点击。这不是 bug，是策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别给
<video>或poster直接绑click事件去调play()，大概率静默失败 - 把播放逻辑挂到用户第一次点击的任意元素上（比如封面
<div>），并在回调里立即调用video.play()—— 这个上下文才算“可信手势” - 如果封面是上传后动态插入的，确保绑定事件在 DOM 插入后立刻完成，不要等
load或loadeddata，那些时机已错过手势窗口 - 测试时用真机，Chrome 模拟器的 touch 行为跟真实 iOS 差很远
封面图格式与兼容性坑点
不是所有图片格式都能当 poster。WebP 在 Safari 14+ 才支持，AVIF 基本别想，而老旧安卓机对 PNG 透明通道渲染异常——这些不会报错，只会显示空白或色块。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 生产环境统一用 JPEG：体积小、兼容性好、无透明干扰，哪怕原图是 PNG 也转成 JPG 再上传
- 如果必须保留透明（比如 logo 叠加），就放弃
poster，改用上面说的 CSS 覆盖方案，此时图格式自由度高得多 - 服务端接收封面时，别只验文件扩展名，要读取二进制头（magic number）确认真实类型，否则用户改个 .jpg 后缀传个 WebP，前端就懵了
- 尺寸别盲目塞高清图：iOS Safari 对 > 4K 的 poster 图可能解码失败，建议上限控在 1920×1080 以内
封面看着简单，但跨端一致性最吃细节：路径是否带缓存、图片是否被 CDN 转码、video 是否设置了 muted 才允许自动播放……这些点串起来，才是实际能跑通的链路。
