chrome 中 poster 加载元数据后不消失，本质是视频未达 readystate >= 2（如 src 为空、404、跨域拦截或 preload="none"），需检查网络请求、控制台错误、video.readystate 值，并确保 controls 存在、preload="metadata"、动态更换时重载 src 而非仅赋值 poster。
Chrome 中 poster 加载元数据后不消失？先确认是否真没消失
多数情况下，你看到“poster 没消失”，其实是视频还没触发 loadedmetadata，或者根本没开始加载——不是浏览器 bug，而是资源没到位。Chrome v78+ 默认在 readyState >= 2（即元数据就绪）时隐藏 poster，所以它“不消失”往往意味着：视频 src 为空、404、跨域被拦，或 preload 被设为 "none" 导致元数据迟迟不加载。
- 打开 DevTools → Network 标签页，过滤
img和media，确认 poster 图片是否返回 200；若返回 404 或 403，poster 就不会被渲染，更谈不上“消失” - 检查控制台是否有
Failed to load resource: the server responded with a status of 404—— 这类错误常被忽略，但直接导致 poster 不出现 - 用
video.readyState手动查状态：console.log(video.readyState)；若长期为0（HAVE_NOTHING），说明视频资源根本没加载，poster 自然“卡住”
video 元素没加 controls 属性，poster 渲染逻辑被弱化
部分浏览器（尤其是旧版 Safari 和某些安卓 WebView）在 <video></video> 没写 controls 时，会跳过 poster 的完整渲染流程——它可能显示几帧后就退成黑底，或干脆不触发 poster 绘制。这不是规范问题，而是实现差异。
- 哪怕你只想要静音自动播放，也建议先加上
controls调试：一旦确认 poster 行为正常，再用 CSS 隐藏控件：video::-webkit-media-controls { display: none; } - 不要依赖
controls=false或移除属性来“禁用控件”——HTML 属性是布尔型，写了就是 true，删掉才是否定 - 移动端尤其要注意：iOS Safari 在无
controls且无用户手势时，可能连 poster 的点击响应都禁掉
preload="none" 导致 poster 长期停留，但这不是稳定方案
设 preload="none" 确实能让 poster 显示更久，因为浏览器压根不加载元数据；但代价是首次播放延迟高、canplay 事件永不触发、iOS Safari 可能直接忽略该属性——它只是“看起来没消失”，实际已脱离可控状态。
- 真正需要“长时间显示 poster”的场景（比如自定义封面层），应该用
preload="metadata"+ CSS 背景图兜底 + JS 控制显隐 -
preload="metadata"是平衡点：它拉取视频头信息（时长、宽高、编码），让loadedmetadata可靠触发，同时不下载主体帧数据 - 避免混用
autoplay和preload="none"：前者要求资源就绪才能播，后者阻止就绪，结果常是黑屏+静音+无反馈
动态更换 poster 后不刷新？别赋值 video.poster
直接写 video.poster = 'new.jpg' 在 Chrome、Safari、Firefox 中均无效——DOM 属性更新不触发重绘，浏览器根本不重新请求图片或重布局。
- 唯一可靠方式是重载视频资源：
video.src = ''→video.poster = 'new.jpg'→video.src = 'video.mp4'→video.load() - 注意：这个过程会清空所有缓冲、中断当前播放、触发一次完整加载；如果只是暂停时换图，用
background-image+display切换更轻量 - 每次调用
URL.revokeObjectURL()清理之前生成的 blob URL，否则内存持续增长（尤其在频繁切换封面的管理后台中）
最麻烦的从来不是“怎么让 poster 消失”，而是“怎么让它在该消失的时候消失、该留下时留下”——这需要你把 poster 当作一个受控状态，而不是写死的 HTML 属性。路径、preload、controls、事件监听，四个点缺一不可，漏掉任何一个，行为就不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
