video 的 poster 属性需手动指定静态图，仅在未加载/未播放/加载失败时显示；常见失效原因包括 preload 策略、ios safari 懒加载限制、路径404、跨域、autoplay 抢帧及不支持 data:url；稳定显示须设 preload="metadata"、禁用 autoplay、js 控制播放、本地起服务、动态更换需调 load()，ios 兜底用极小 png 或自定义 overlay。
video 的 poster 属性不是“自动截首帧”，而是你手动指定的一张静态图片——它只在视频未加载、未播放或加载失败时显示；一旦第一帧可渲染，它就立刻消失。
为什么设置了 poster 却看不到封面？
这不是 HTML 写错了，而是浏览器压根没走到“该显示 poster”的阶段：
-
preload="auto"或未设preload时，浏览器可能直接解码并渲染首帧，跳过poster - iOS Safari（尤其 15–16）对大体积
poster（>200KB）懒加载，不加preload="metadata"就根本不发请求 - 图片路径 404 或跨域（如 CDN 没配
Access-Control-Allow-Origin: *），浏览器静默 fallback 到黑屏或首帧 - 用了
autoplay且满足用户交互条件（比如页面已激活），poster可能只闪现几毫秒 -
poster不支持data:URL（base64），写成poster="data:image/png;base64,..."必然 404
怎么让 poster 真的稳定出现？
单靠写死属性不够，得控制加载节奏和降级逻辑：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 显式加
preload="metadata"：确保只加载元数据 +poster图，不提前下载视频主体 - 去掉
autoplay，改用 JS 监听canplay后再调play()，避免首帧抢跑 - 本地开发别用
file://协议测试，必须起本地服务（如python3 -m http.server） - 动态换封面时，不能只改
video.poster = "new.jpg"，必须跟video.load()才刷新（注意：这会清空缓冲）
iOS Safari 兜底方案：别信“兼容性已解决”
这是最常被忽略的点：iOS Safari 在某些版本中会彻底忽略 poster，哪怕路径、格式、preload 全对。没有银弹，只有两个务实选择：
- 用一张极小的纯色
.png（比如 1×1 像素灰图）作为保底poster，至少避免黑屏 - 完全绕过原生机制：用
<div class="video-wrapper"> <video></video><img class="poster-overlay" src="cover.jpg"> </div>，初始display: block，监听playing事件后display: none；暂停时再显示
真正难的不是设置 poster，而是在不同设备、不同网络、不同缓存状态下，让它始终以可控方式出现——这意味着你要放弃“写一次就完事”的想法，转而把 poster 当作一个需要主动管理的资源状态，而不是一个静态属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
