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 双保险。
