17370845950

poster 属性是尽力而为的视觉占位符，不报错不提示，失效主因是路径无效或 file:// 协议限制；验证需直接在地址栏访问路径，兜底推荐 CSS 背景图+JS 事件控制。

video 标签的 poster 属性到底有没有生效？

多数时候封面不显示，根本不是属性写错了，而是浏览器压根没加载到那张图——poster 是一个“尽力而为”的视觉占位符，它不触发网络错误提示，也不抛异常，图挂了就静默留白。

• poster 值必须是有效 URL，相对路径以 HTML 文件所在目录为基准，不是以 JS 或 CSS 文件位置算
• 开发工具 Network 面板里搜图片名，看状态码是不是 404 或 403
• 如果路径含中文或空格，未编码（如没转成 %E4%B8%AD%E6%96%87）会导致请求失败，尤其在本地 file:// 协议下更敏感

本地预览时 poster 加载失败的典型场景

用双击打开 HTML、或 VS Code Live Server 以外的方式本地运行，file:// 协议会禁止跨目录读取资源，哪怕路径语法完全正确。

• 错误写法：，但 HTML 在 /project/index.html，而图片实际在 /assets/images/cover.jpg
• Live Server 默认根目录是项目文件夹，但双击打开时浏览器认为根是当前文件所在目录，二者行为不一致
• Chrome 对 file:// 下的 poster 有额外限制，Safari 更宽松——别靠本地双击测试兼容性

如何验证 poster 路径是否真实可达？

别猜，直接复用路径在浏览器地址栏访问。这是最快最准的验证方式。

• 右键检查元素，复制 poster 属性值（比如 ./img/thumb.png）
• 在当前页面 URL 后删掉文件名，粘贴路径拼上去，例如从 http://localhost:5500/page.html 拼成 http://localhost:5500/img/thumb.png
• 如果返回图片，说明路径对；如果报错，就按控制台 Network 中的 Request URL 逐级修正

备用方案：用 CSS 背景图兜底更可控

当 poster 不稳定或需支持加载失败降级时，CSS 方式反而更可靠，还能加 loading 动画。

注意：:is(:playing, :not([paused])) 并非所有浏览器都支持，生产环境建议用 JS 监听 play 和 pause 事件来 toggle 类名。

真正麻烦的不是写错路径，而是误以为 poster 是个强保障机制——它只是个轻量提示，一旦涉及路径动态生成、CDN 域名切换、或构建后路径重写，就必须走 Network 验证+ fallback 双保险。