html5 的 poster 属性仅作加载前占位图，需配合 preload="metadata"、有效路径（优先绝对路径）、匹配宽高比的 jpg/png 图片（≤200kb）才能稳定显示；动态更换须 removeattribute('poster') 后 load()，或用 dom 遮罩层替代。
HTML5 的 <video></video> 标签用 poster 属性设置封面图，但它的作用不是“永久封面”，而是视频加载完成前、首帧未解码时的静态占位图——写对路径只是第一步，真正显示出来还得看加载时机和浏览器行为。
poster 的正确写法和路径要点
直接在 <video></video> 标签里写 poster="路径" 即可，但路径必须有效且可访问：
- 优先用绝对路径，如
poster="/assets/cover.jpg"（以/开头），避免因 HTML 文件位置变化导致 404 - 别用
file://本地路径，HTTP 环境下必然失效；也别用https://外链或data:image/...base64，多数浏览器会静默忽略 - 构建工具（如 Vite）中，图片若放在
src/assets/，需用new URL('./cover.jpg', import.meta.url)获取运行时路径，不能硬编码 - 文件名注意大小写和空格，
cover.JPG和cover.jpg在 Linux 服务器上是两个文件
让 poster 稳定出现的关键配置
很多情况下 poster 一闪就消失，问题不在图片本身，而在 video 的加载策略：
- 务必加上
preload="metadata"：它让浏览器只加载元数据（时长、尺寸、封面等），不提前下载视频流，既保障 poster 加载，又节省流量 -
不要加
autoplay：哪怕加了muted，一旦 autoplay 触发，浏览器会立刻尝试解码首帧，poster 几乎不可见 - 移除
preload="none"：iOS Safari 在该模式下可能完全不请求 poster 图片，尤其体积 >200KB 时 - 确保
<source></source>的src有效：如果视频资源 404 或跨域未配 CORS，部分浏览器会跳过 poster 渲染
尺寸、格式与兼容性避坑
poster 不会自动适配 video 容器，拉伸、黑边、模糊都源于尺寸或格式不当：
- 图片宽高比必须严格匹配视频源比例（如 16:9 视频配 1280×720 或 1920×1080 图），否则浏览器会强行拉伸填充
- 只用
.jpg或.png：WebP 在 iOS 16 前不支持，SVG 不渲染，AVIF 兼容更差 - 压缩图片体积：建议控制在 200KB 以内，尤其面向 iOS 用户；可用 Squoosh 或 FFmpeg 批量优化
- 别依赖
object-fit修复 poster——它对 poster 属性无效，只影响视频画面本身
动态换封面或增强交互的实用方案
直接改 video.poster = 'new.jpg' 在大多数浏览器中不会刷新显示，这不是 bug，而是规范限制：
- 真要换图：先
video.removeAttribute('poster')，再赋新值，最后必须调video.load()——但注意这会清空缓冲、中断播放 - 更推荐 DOM 遮罩层：
<div class="video-wrapper"> <video></video><img class="overlay" src="cover.jpg"> </div>，用 JS 监听play/pause控制显隐 - 想让封面“始终可见直到播放”：监听
loadedmetadata后，把 poster 图设为 video 的background-image，播放时再移除背景 - 需要精准首帧？用 FFmpeg 导出视频第 0 帧：
ffmpeg -i input.mp4 -ss 00:00:00.000 -vframes 1 cover.jpg，确保和 poster 内容一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
