应动态设置 poster 属性：视口进入时或用户交互后注入，避免预加载；用 webp 格式、70 质量、匹配宽高比；通过 new image() 预校验并 fallback；必设 preload="metadata" 且正确操作 dom 更新。
直接用好 poster 属性，关键不在“加不加”，而在“什么时候加、加什么、加完怎么兜底”。它不是装饰，而是首屏视觉链上承前启后的锚点。
动态设置 poster，避免无效预加载
写死在 HTML 里的 poster="cover.jpg" 会让部分浏览器（如 Safari）在解析阶段就发起请求，哪怕视频还在折叠区域或用户根本没打算看。更优做法是按需注入：
- 用
IntersectionObserver监听视频进入视口后再赋值：videoEl.setAttribute('poster', 'thumb-720p.webp') - 若视频默认不自动播放，可先不设 poster；等用户 hover 播放按钮或点击时再设置，减少首屏请求数
- 避免对
display: none或visibility: hidden的 video 提前设 poster，旧版浏览器仍可能触发加载
压缩与格式适配，兼顾清晰与速度
一张 1280×720 的 WebP 图片，质量设为 70，体积通常压到 40 KB 左右——这刚好卡在 iOS Safari 对 poster 的敏感阈值（200 KB）之下，又足够撑起 LCP 指标：
- 尺寸严格匹配视频宽高比（如 16:9 就用 1280×720），避免浏览器缩放导致模糊或重绘
- 优先用 WebP（Chrome/Firefox/Safari 16.4+ 全支持），iOS Safari 14+ 也兼容；旧版本 fallback 到 JPEG
- 不用 PNG（体积大）、不盲目追求 100% 质量——65–75% 是清晰度与体积的最优平衡点
主动校验 + 降级兜底，不让白屏发生
poster 加载失败不会触发原生 error 事件，靠监听 video 自身无法捕获。必须前置验证：
- 用
new Image()预加载 poster URL，成功再赋给 video；失败则 fallback 到 base64 占位图或纯色背景（如background: #1a1a1a） - 服务端 SSR 场景下，可提前校验路径有效性，或直接内联一个极简 data URL 作为保底封面
- 别用 CSS
background-image替代 poster——虽能控闪烁，但会破坏原生控件行为（如全屏按钮失效、音量条异常）
配合关键属性，激活浏览器渲染逻辑
iOS Safari（尤其 15–16）有个经典问题：不设 preload="metadata" 时，poster 可能完全不显示，直到点击播放才闪一下。这不是 bug，是它把 poster 当作“非关键资源”处理：
- 务必加上
preload="metadata"（不是"auto"，后者会预加载音视频流） - 确保 video 标签有
controls和playsinline，移动端才能稳定渲染控件与 poster - 修改 poster 时，不要只改
video.poster = 'x.jpg'，要先removeAttribute('poster')再setAttribute，否则可能不重绘
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
