17370845950

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，浏览器会居中裁剪显示，边缘内容可能被切掉——别只看“能显示”，要真看它显示得对不对。