video 标签的 poster 属性是 html5 原生支持的唯一标准封面方案，必须直接写在 开始标签上，值为可访问图片 url，需注意路径、ios preload 行为及加载失败无 fallback 等问题。
video 标签的 poster 属性是唯一标准方案
直接用 poster 属性就行，这是 HTML5 原生支持的封面机制，浏览器加载视频前会显示这张图，不是 hack，也不依赖 JS。
常见错误是把图片塞进 <source></source> 里，或者用 CSS 覆盖——都不起作用。必须写在 <video></video> 开始标签上：
<video controls poster="cover.jpg"><source src="video.mp4" type="video/mp4"></source></video>
-
poster值必须是可访问的图片 URL（相对或绝对路径），不能是 base64（部分浏览器不渲染） - 图片尺寸建议与视频宽高比一致，否则可能被拉伸或裁剪（浏览器默认按
object-fit: contain处理） - 如果视频已缓存或秒开，
poster可能一闪而过，属正常行为；想强制停留需 JS 控制播放状态
poster 图片加载失败时页面会空白
当 poster 地址 404 或跨域被拒，Chrome/Firefox 默认不显示任何内容，用户看到纯黑或灰块，不像 <img> 有 fallback 机制。
- 务必确保图片路径正确，可在 DevTools 的 Network 面板检查
poster请求是否返回 200 - 若部署在 CDN 或子路径下，注意相对路径基于当前 HTML 文件位置，不是 video 文件位置
- 无法用
onerror监听poster失败（该属性无事件），只能靠构建时校验或服务端配置 fallback 图片
移动端 iOS Safari 对 poster 渲染有延迟
iOS 15+ 上，poster 可能在用户点击播放后才出现，尤其配合 autoplay 或 preload="metadata" 时更明显。
- 避免同时设
autoplay和poster：iOS 会忽略poster直接尝试播放（无声且常失败） - 改用
preload="none"可提升 poster 显示概率，但首帧加载变慢 - 真机调试时用 Safari Web Inspector 查看 Elements 面板，确认
poster属性存在且值非空
需要动态切换封面？得用 JS 替换 poster 属性
HTML 属性不响应式，改 poster 必须手动操作 DOM，且仅对未播放的 video 生效（已播放后替换无效）。
const video = document.querySelector('video');
video.poster = 'new-cover.webp'; // 立即生效，无需 reload
- 替换后浏览器会重新加载图片，旧 poster 缓存不影响新图
- 如果 video 已开始播放，新 poster 不会自动显示，需先
video.load()重置状态（这会清空当前播放进度） - 不要用
video.style.backgroundImage模拟封面——会遮挡 controls，且无法响应全屏等原生行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
