poster属性必须直接写在标签内且路径正确，否则加载失败不报错；Chrome与Safari行为差异大，需用CSS背景兜底并配合JS控制显隐，移动端需通过覆盖层触发播放。
直接在 <video></video> 标签里写 poster 属性，但只在视频未播放且首帧未加载时显示——不是“封面图”，是“加载占位图”，设错路径、加了 autoplay、或碰上 Safari 懒加载，它就直接消失。
poster 必须写在 <video></video> 开始标签里，不能用 JS 动态改
浏览器只认 HTML 原生属性，video.poster = 'cover.jpg' 或 video.setAttribute('poster', ...) 在 Chrome、Safari 都不触发重绘，多数情况静默失败。
- ✅ 正确写法：
<video controls poster="cover.jpg"></video> - ❌ 错误写法：
<video><source poster="cover.jpg"></source></video>（<source></source>不支持该属性） - ❌ 错误写法：
video.poster = 'new.jpg'; video.load();（无效，load()不会刷新 poster）
图片路径和格式踩坑最多：404 不报错，只留白
poster 加载失败时浏览器不提示、不报错，控制台可能连 404 都不显示（尤其 CDN 或防盗链拦截），页面就一片空白或灰块。
- 路径优先用绝对路径，比如
poster="/assets/cover.jpg"，避免相对路径因当前 URL 变动失效 - 别用 base64：
poster="data:image/png;base64,..."在旧版 Android WebView 中会被忽略 - 格式只用
.jpg或.png；WebP 在 iOS 14 以下不兼容 - 检查网络面板，确认
cover.jpg请求返回 200，且Content-Type是image/jpeg或类似值
Chrome 和 Safari 对 poster 的行为根本不一样
Chrome v78+ 在 loadedmetadata 后立刻隐藏 poster；Safari 则一直显示到用户点击播放或调用 play()。同一段代码，在两个浏览器里看起来像两个功能。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- Chrome 下：视频元数据一就绪（哪怕没点播放），poster 就被黑屏或首帧顶掉
- Safari 下：poster 会一直挂着，直到你真开始播——容易误以为“它更稳定”
- 想跨浏览器统一显示？得用 CSS 背景兜底：
video { background: url(cover.jpg) center/cover; }，再配合 JS 控制显隐 - 别加
preload="none"来“延长”poster 显示时间——iOS Safari 可能压根不请求 poster 图片
移动端点击无响应？不是 poster 的锅，是浏览器策略
iOS Safari 和部分安卓 WebView 明确禁止在无用户手势上下文里激活视频——给 <video></video> 或 poster 绑 onclick，基本不会触发 play()。
- ✅ 正确做法：用
<div class="cover-overlay"></div>盖在 video 上，监听它的 click，再调video.play() - ✅ 必须确保事件绑定发生在用户真实交互之后（比如 touchstart 后立即注册）
- ⚠️ 注意内存泄漏：如果用
URL.createObjectURL(file)做上传预览，每次换图后必须调URL.revokeObjectURL()
真正难的不是写那行 poster="xxx"，而是在 preload 策略、CORS 配置、autoplay 限制、首帧内容、iOS 懒加载之间，找到那个所有浏览器都接受的交集点——它往往不在文档里，而在 Network 面板和真机测试里。
