video 标签的 poster 属性必须是有效图片 url，否则会空白或黑屏；需确保路径正确、格式兼容（推荐 jpg/png）、避免 file:// 协议；设置 muted autoplay 可支持静音自动播放，但 ios 仍可能要求用户手势；动态修改 poster 后须调用 load() 重载；建议设明确宽高并检查网络请求状态。
video 标签的 poster 属性必须是有效图片 URL
浏览器只会在视频尚未加载、未开始播放时显示 poster 图像，它不是“占位符”或“背景”，而是严格依赖可访问的图片资源。如果图片 404、跨域被拒、格式不被支持（比如 WebP 在旧版 Safari），poster 就会空白或回退为黑屏。
- 务必用绝对路径或确保相对路径相对于当前 HTML 文件位置正确，例如：
<video poster="images/cover.jpg"></video>要求images/cover.jpg真实存在且可被服务器返回200 - 避免使用本地
file://协议打开测试——多数浏览器会因安全策略阻止加载poster - 推荐使用
.jpg或.png；不要依赖.webp，iOS 14 之前 Safari 不支持poster加载 WebP
设置 poster 后仍显示黑屏？检查视频是否触发了自动播放策略
Chrome、Safari 等现代浏览器会阻止无用户交互下的自动播放（尤其带声音的视频）。即使设置了 poster，若视频尝试静音自动播放失败，部分浏览器可能跳过封面直接进入加载中状态，表现为黑屏而非封面图。
- 加
muted和autoplay属性仅对静音自动播放生效：<video poster="cover.jpg" muted autoplay></video> - 但注意：即使加了
muted，某些 iOS 版本仍要求显式用户手势（如点击）才能开始播放，此时poster会一直显示，这是预期行为 - 可通过监听
canplay或loadeddata事件确认视频元数据是否就绪，而不是只看poster是否出现
动态修改 poster 属性需手动触发重载
直接改 DOM 的 poster 属性（比如 videoEl.poster = "new.jpg"）不会自动刷新封面——浏览器不会重新拉取图片，也不会重绘。
- 必须调用
load()方法强制重载视频资源：videoEl.poster = "new.jpg"; videoEl.load(); - 如果只是想切换封面而不重载视频（比如预览不同角度），建议用 CSS 覆盖：把
poster设为空或占位图，再用绝对定位的<img>叠在 video 上，并通过 class 控制显隐 -
load()会中断当前播放、清空已缓冲数据，慎用于正在播放中的视频
移动端 Safari 的 poster 渲染有尺寸和时机限制
iOS Safari 对 poster 图像有隐式裁剪和延迟渲染逻辑：如果视频尺寸未明确设置（缺少 width/height 或 CSS 尺寸），或页面刚加载时 poster 图片尚未完成解码，它可能短暂闪黑、拉伸变形，甚至完全不显示。
- 给
<video></video>设置明确的width和height属性（像素值或响应式单位均可），或用 CSS 固定容器宽高比（如aspect-ratio: 16/9） - 确保
poster图像分辨率与视频原始宽高比一致，否则会被拉伸（Safari 不做等比缩放居中，默认拉满填充） - 如果首屏需要立即展示封面，可在
<video></video>外层加一个同尺寸的<img>作为 fallback，JS 检测到canplay后隐藏它
poster 是 UI 层的静态封面，但它本质是媒体加载流程的一部分，受网络、解码、策略、尺寸四重约束。改完属性不生效？先查控制台有没有图片 404，再看 Network 面板里 poster 请求是否返回了 200 和正确的 Content-Type。
