直接在标签中静态设置poster属性为有效图片路径（如poster="images/cover.jpg"），并确保HTTP服务访问、图片存在且格式正确，是让加载占位图生效最稳妥的方式。
直接在 <video></video> 标签里写 poster 属性，值为有效图片路径，就能让浏览器在视频加载完成前显示这张图——它不是“播放封面”，而是“加载占位图”，生效前提是视频还没开始解码第一帧。
怎么写才一定生效
最稳妥的方式是静态写在 HTML 中：
- 用相对路径（如
poster="images/cover.jpg"），路径以 HTML 文件所在位置为基准 - 确保图片真实存在、HTTP 返回 200、Content-Type 是
image/jpeg或image/png - 不要用
file://协议本地双击打开，必须通过 HTTP 服务访问（如http://localhost） - 避免空格、中文、大小写混淆，服务器上
cover.JPG和cover.jpg不是同一个文件
为什么设置了却看不到
常见不是代码错，而是时机或配置冲突：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
preload="none"会让部分浏览器（尤其 iOS Safari）跳过加载 poster，建议设为preload="metadata" - 写了
autoplay，哪怕没播出来，浏览器也可能立刻隐藏 poster 换成黑屏或首帧 - Chrome v78+ 在元数据加载完（
loadedmetadata事件后）就隐藏 poster；Safari 则一直显示到用户点击播放——同一段代码，两边看起来效果不同 - 图片尺寸和
<video></video>容器宽高比不一致，导致严重拉伸、留白或裁剪
怎么让封面更稳、更可控
单靠 poster 无法跨浏览器统一呈现“始终可见的封面”，需要组合方案：
立即学习“前端免费学习笔记（深入）”；
- 给
<video></video>加 CSS 背景：style="background: url(images/cover.jpg) center/cover no-repeat;"，作为 poster 失效时的兜底 - 用包裹容器 + 绝对定位的
<img alt="HTML5 中怎么配置 video 的 poster 属性设置视频加载前的封面图" >层盖住 video，监听play事件后隐藏，pause或ended后再显示 - 显式设置
<video width="640" height="360"></video>或用aspect-ratio: 16/9约束容器，让 poster 缩放更可预期 - 封面图推荐导出为 1280×720 或 1920×1080，严格匹配视频原始宽高比
能不能 JS 动态换封面
不能直接改 video.poster = 'new.jpg'——多数浏览器不响应。真要换，只有两种办法：
- 重载整个视频：清空
src→ 更新poster→ 恢复src→ 调用load()（会中断播放、清缓冲） - 用上面说的 DOM 覆盖层方案，只切换
<img src alt="HTML5 中怎么配置 video 的 poster 属性设置视频加载前的封面图" >，完全不影响 video 当前状态
