HTML5 的 poster 属性专为自定义封面设计，但仅在视频未播放、未启用 autoplay 且首帧未加载时生效；常见失效原因包括 preload="none"、路径错误、跨域限制、格式不兼容及宽高比不匹配。
直接说结论：HTML5 标签的 poster 属性就是专为自定义封面设计的，但它的生效有明确前提——视频必须未开始播放、且未设置 autoplay 或尚未加载出首帧；否则浏览器可能忽略它。
为什么设置了 poster 却看不到封面？
常见原因不是写法错，而是加载时机或属性冲突：
-
poster只在视频处于“初始静止状态”时显示，一旦触发play()、用户点击播放、或设置了autoplay（哪怕没播出来），封面就会立刻被第一帧替代 - 某些浏览器（如 Safari iOS）在
preload="none"时可能不加载poster图片，导致空白 -
poster值是普通 URL，不支持 base64 内联（会解析失败，控制台报 404） - 图片路径错误、跨域未配 CORS、或图片格式不被支持（推荐用
.jpg或.png，避免.webp在旧浏览器失效）
poster 属性怎么写才可靠？
写法本身很简单，关键是配合其他属性控制行为：
说明：
立即学习“前端免费学习笔记（深入）”；
-
preload="metadata"是关键：确保封面能加载，同时不提前下载整段视频 - 不要加
autoplay，哪怕想“自动播”，也应 JS 控制（video.play()）并监听canplay后再触发，避免封面闪一下就消失 - 如果封面需响应式，用 CSS 控制
video容器尺寸，poster图会自动等比缩放（不拉伸）
动态切换封面的坑在哪？
不能直接改 video.poster 属性值来换图——浏览器不会重新渲染。正确做法是重置 src 并重新加载：
const video = document.querySelector('video');
video.poster = '/images/new-cover.jpg';
video.load(); // 必须调用 load()，否则 poster 不更新
注意：
-
load()会中断当前播放、清空已缓冲数据，慎用于正在播放中的视频 - 若只想“视觉上”换封面而不影响播放，建议用绝对定位的
上，并用 JS 控制显隐（video的playing和pause事件监听） - 部分安卓 WebView 对动态
poster支持极差，实测无效，优先走 CSS 覆盖方案
最常被忽略的一点：封面图尺寸没对齐视频宽高比。比如视频是 16:9，但封面图是 4:3，浏览器会居中裁剪显示，边缘内容可能被切掉——别只看“能显示”，要真看它显示得对不对。
