video的poster在商品页常失效，主因是路径错误、CDN MIME类型缺失、多视频复用DOM、iOS Safari preload限制等；应使用绝对URL、preload="metadata"、CSS fallback及手势触发播放。
poster 属性能直接生效，但绝大多数商品详情页里它会“看似设置了却不出图”——根本原因不是写法错，而是资源链路、加载时机或移动端交互限制没对齐。
video 的 poster 为什么在商品页常失效？
商品详情页通常有懒加载、CDN 路径不一致、多视频复用同一 DOM 结构等问题，导致 poster 静默失败。浏览器不会报错，只会留白或显示黑屏。
- 路径写成相对路径如
poster="img/cover.jpg"，但页面实际部署在子目录（如/product/123），请求变成/product/img/cover.jpg→ 404 - 封面图放在本地开发环境能开，上线后 CDN 域名未配 MIME 类型，返回
text/html→ 浏览器拒绝渲染 - 多个
<video></video>共用同一个src或动态切换src，但没重置poster，旧地址残留或被忽略 -
preload="none"+ iOS Safari：不触发首帧加载，poster就不显示（哪怕 HTML 里写了）
怎么让 poster 在商品页稳定显示？
别只靠属性硬写，得配合显式加载控制和 fallback 容错。
- 用绝对路径或完整 HTTPS URL：
poster="https://cdn.example.com/products/123-cover.jpg"，避免路径解析歧义 - 给
<video></video>显式设preload="metadata"，确保浏览器至少拉取视频头信息，poster才有机会渲染 - 加一层 CSS fallback：用
background-image给<video></video>容器设默认封面，poster加载成功后靠层叠自动覆盖 - 监听
loadedmetadata事件，一旦触发，可移除容器上的 fallback class，避免闪动
用户上传新封面后如何实时更新？
别改 poster 属性本身——多数浏览器不重绘。用 CSS 图层叠加更可靠。
- HTML 结构中，把
<video></video>和一个<img class="cover-preview" alt="HTML商品详情页怎么做视频封面？预览图设置教程" >放进同一<div class="video-container"> <li>上传后调 <code>URL.createObjectURL(file)，赋给.cover-preview.src，再.cover-preview.style.display = "block" - 播放时，用 JS 切换
.cover-preview的显隐，并同步调video.play()；暂停/ended 时再恢复封面 - 每次换图前务必
URL.revokeObjectURL(oldUrl)，否则内存持续增长，尤其在商品页频繁切换 SKU 时明显 - 把播放逻辑挂在封面容器（比如
<div class="video-trigger">）上，而不是 <code><video></video>自身 - 事件监听必须在 DOM 插入后立即绑定，不能等
loadeddata或canplay—— 那时手势上下文已过期 - 真机测试必不可少；Chrome DevTools 的 device mode 模拟 touch 行为不准确，尤其对
play()的 Promise 拒绝表现失真
真正卡住的不是怎么写
移动端点击封面无法播放？这是策略，不是 bug
iOS Safari 和部分安卓 WebView 要求播放必须由“可信用户手势”触发。直接给 <video></video> 或 poster 绑 click 无效。
立即学习“前端免费学习笔记（深入）”；
poster，而是你是否检查了 Network 面板里那张封面图是不是真返回了 200 + image/jpeg。其他所有技巧，都建立在这个前提之上。
