poster属性是video标签原生语义化封面机制，仅在视频未加载、未播放或加载失败时显示指定图片；失效主因包括404/cors错误、autoplay导致封面闪退、ios safari懒加载未配preload="metadata"、base64不兼容及缺少controls属性。
poster 属性就是让 <video></video> 在加载中、未播放、或播放失败时显示一张指定图片——它不是装饰，是原生语义化封面控制机制。
poster 为什么有时不显示？常见失效原因
不是代码写错了，而是浏览器在特定条件下直接跳过渲染：
-
poster图片返回 404 或 CORS 错误（尤其 CDN 图片没配Access-Control-Allow-Origin: *） - 视频
src已缓存且设置了autoplay，浏览器直接开始播放，封面一闪即逝 - iOS Safari（15–16）对大体积 poster（>200KB）懒加载：不加
preload="metadata"就根本不请求 - 把 base64 字符串硬塞进
poster，旧版 Android WebView 解析失败 -
<video></video>没设controls，部分浏览器在无控件时弱化 poster 渲染逻辑
怎么设才稳定生效？路径与格式要点
别依赖相对路径猜位置，也别指望浏览器自动适配尺寸：
- 用绝对路径最稳，比如
poster="/assets/cover.jpg"，避免因当前 HTML 路径变动导致 404 - 图片格式只用
.jpg或.png，WebP 在部分老 iOS 版本中不认 - 宽高比尽量匹配视频本身，否则浏览器默认拉伸填充；若必须不同，加 CSS：
<video style="object-fit: cover;"></video> - 导出封面图时关掉锐化/对比度增强，视频带黑边（letterbox）的话，封面也要保留同款黑边，否则播放瞬间会“缩一下”
移动端点击无响应？不是 poster 问题，是策略限制
iOS Safari 和部分安卓 WebView 明确禁止在无用户手势前提下激活视频交互——poster 点击无效是设计使然，不是 bug：
- 不要给
<video poster="..."></video>直接绑onclick播放，它不会触发 - 真要实现“点击封面播放”，得用覆盖层：
<div class="video-wrapper"> <video></video><img class="poster-overlay" src="..."> </div>，监听img的点击，再调video.play() - 记得每次换封面后调
URL.revokeObjectURL()清内存，否则临时 URL 积压导致卡顿
想用 ffmpeg 截首帧当封面？注意三个实操细节
手动截帧比靠 poster 更可控，但容易导出错位图：
- 命令用
ffmpeg -i input.mp4 -ss 00:00:00.000 -vframes 1 -q:v 2 poster.jpg，-ss放前面提速，-q:v 2控制画质（1 最高，31 最低） - 如果视频加了 LUT 或滤镜，封面图必须套同款再导出，否则色差明显
- 检查视频是否含黑边：用
ffprobe -v quiet -show_entries stream=width,height,aspect_ratio -of default input.mp4看原始分辨率和显示宽高比
真正难的不是设 poster，而是在 autoplay、preload、CORS、移动端策略、首帧提取之间找那个刚好能被所有浏览器同时接受的交集点——多数失效，其实都卡在其中一环没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
