poster是首屏视觉链关键锚点，需动态注入、精准压缩、主动校验并配preload="metadata"，避免白屏、lcp拖累与无效请求。
poster 属性不是“加个图就完事”的装饰项，而是首屏视觉链里承前启后的关键锚点。它不自动截帧、不参与语义、也不响应 error 事件——用得好，能稳住用户注意力；用得随意，轻则白屏闪动，重则拖垮 LCP 和交互感知。
动态注入比写死更可控
直接在 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 指标。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 宽高比必须匹配视频（如 16:9 就用 1280×720），否则浏览器缩放会导致模糊或重绘
- 优先用 WebP（Chrome/Firefox/Safari 16.4+ 全支持；iOS Safari 14+ 也兼容），旧版本 fallback 到 JPEG
- 不用 PNG（体积大）、不盲目追求 100% 质量——65–75% 是清晰度与体积的最优平衡点
主动校验 + DOM 更新才能兜底
poster 加载失败不会触发原生 error 事件，靠监听 video 标签本身无法捕获。必须前置验证，且更新后要确保浏览器重绘。
- 用
new Image()预加载 poster URL，成功再赋给video.poster；失败则 fallback 到 base64 占位图或纯色背景（如background: #1a1a1a） - 动态更换 poster 时，不能只改
video.poster = "new.jpg"，要先removeAttribute('poster')，再setAttribute，最后调video.load()强制刷新（注意：会清空缓冲） - 服务端 SSR 场景下，可提前校验路径有效性，或内联一个极简 data URL 作为保底封面
必配 preload="metadata"，别让 Safari “选择性失明”
iOS Safari（尤其 15–16）有个经典问题：不设 preload="metadata"，poster 可能完全不显示，直到点击播放才闪一下。这不是 bug，是它把 poster 当作“非关键资源”处理。
- 务必显式加上
preload="metadata"（不是"auto"，后者会预加载音视频流） - 去掉
autoplay，改用 JS 监听canplay后再调play()，避免首帧抢跑覆盖 poster - 本地开发别用
file://协议测试，必须起本地服务（如python3 -m http.server）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
