video标签的poster属性必须在html中静态声明才可靠，动态赋值无效；其显示受浏览器差异、首帧内容、移动端限制及构建路径等多重因素影响，需结合css兜底、img覆盖和内存管理等方案实现跨端一致。
video 标签的 poster 属性必须写在 HTML 里才可靠
直接在 <video></video> 标签中写 poster="cover.jpg" 是最稳定的方式。动态赋值 video.poster = 'xxx.jpg' 在 Chrome、Safari 等主流浏览器中基本无效——DOM 属性更新不会触发重绘，浏览器也不会重新加载图片。
常见错误是用 JS 拼路径后赋值，比如：video.poster = '/assets/' + id + '.jpg'，结果控制台没报错，但封面就是不出现。根本原因是：poster 是初始化时解析的静态属性，运行时修改不生效。
- 路径必须相对于 HTML 文件位置（不是 JS 执行位置），推荐用绝对路径如
poster="/images/cover.jpg" - 不要用
data:image/png;base64,...—— 部分 Android WebView 和旧版 Safari 会忽略 - Webpack/Vite 项目中，若封面图放在
src/assets/，需用import cover from '@/assets/cover.jpg'或new URL('@/assets/cover.jpg', import.meta.url)获取运行时正确路径，不能硬编码poster="assets/cover.jpg"
为什么设置了 poster 却只闪一下就变黑或显示首帧
这不是 bug，是浏览器行为差异：Chrome v78+ 在 loadedmetadata 事件触发后（即元数据加载完成）就隐藏 poster；Safari 则一直显示到用户点击播放或调用 play()。所以同一段代码，在 Chrome 看起来“封面一闪而过”，在 Safari 却“始终可见”。
更麻烦的是，如果视频本身第一帧是黑场、logo 动画或静音过渡帧，浏览器渲染出这一帧后，就会直接覆盖 poster——哪怕你还没点播放按钮。
- 临时验证：加
preload="none"可延长 poster 显示时间，但首次播放延迟明显，且 iOS Safari 可能完全不加载 poster - 真正可控的做法：用 CSS 给
<video></video>设置background: url(cover.jpg) center/cover作为兜底底图 - 监听
loadedmetadata后，用绝对定位的<img>层覆盖视频区域，并在play或timeupdate触发时移除它
移动端 iOS Safari 对 poster 的特殊要求
iOS Safari（尤其 15+）对 poster 图片有隐性门槛：宽度低于 640px 时可能直接跳过渲染，显示黑底；同时，若 preload 设为 "none"，它甚至不发起 poster 请求，直到用户手势触发加载。
另外，缺少 playsinline 或 webkit-playsinline 属性时，某些机型会出现 poster 渲染异常（比如拉伸、偏移或不响应触摸）。
- 封面图建议最小宽度 ≥ 640px，格式优先选
.jpg或.webp，体积控制在 100–300KB -
<video></video>标签务必加上playsinline webkit-playsinline - 不要指望 poster 响应点击——iOS 在未获得用户手势上下文前，
video.play()会被静默拒绝；把播放逻辑绑定到外层<div> 上更稳妥 <h3>上传新封面后如何实时预览并替换</h3> <p>用户上传新封面图时，别试图改 <code>video.poster，而是用 DOM 层模拟：把<video></video>和一个<img>放进同一个容器，初始仅显示<img>，等视频加载完成再切走。关键点在于内存和时机：每次调用
URL.createObjectURL(file)都会生成临时地址，不手动清理会导致内存泄漏；而且事件绑定必须在元素插入 DOM 后立刻完成，否则 iOS 可能错过可信手势窗口。- 监听
input[type="file"]的change事件，用URL.createObjectURL(file)创建预览地址 - 赋给包裹容器内的
<img class="poster-preview">的src，同时设video.style.opacity = '0' - 切换前调用
URL.revokeObjectURL(oldUrl)清理旧地址 - 播放时，先移除
poster-preview的display，再恢复video的可见性
真正难的不是写对
poster这个属性，而是理解它只是“尽力而为”的占位图——浏览器加载策略、首帧内容、移动端限制、CORS、构建工具路径处理，全都会影响最终是否显示。靠单一属性就想跨端一致，几乎不可能。 - 监听
