HTML5 的 poster 属性在旧版浏览器中常不生效，因渲染机制差异导致黑屏；应通过 readyState === 0 && networkState === 0 运行时检测，并用 fallback 覆盖，配合 canplay 或超时移除，同时注意 iOS Safari 的静音播放限制与 networkState 判定时机。
HTML5 <video></video> 的 poster 属性在旧版浏览器中不生效
早期 Chrome（≤30）、Firefox（≤23）、Safari（≤6.1）和所有 IE 版本（包括 IE11）对 poster 的支持不完整——即使写了 poster="cover.jpg"，视频加载完成前仍可能显示黑屏或首帧空白。这不是写法错误，而是渲染机制差异：这些版本在未触发 loadstart 或未解析到关键帧前，不会主动绘制 poster。
判断是否需要 fallback：用 video.readyState + video.networkState 预检
不能只靠 UA 判断版本，而应运行时检测行为。关键指标是：video.readyState === 0（HAVE_NOTHING）且 video.networkState === 0（NETWORK_EMPTY）时，poster 极大概率被忽略。
- 在
video元素插入 DOM 后立即检查，而非等loadedmetadata - 若满足上述条件，手动插入一个
<img alt="HTML5视频早期版无poster定位_版本差异处理说明【说明】" >覆盖层，并监听canplay事件后移除 - 注意：iOS Safari 在静音自动播放策略下可能延迟触发
canplay，需加 3s 超时兜底
poster 加载失败时的静默降级问题
当 poster 图片 404 或 CORS 阻止加载，多数旧版浏览器不会报错，也不会回退到首帧——而是持续黑屏。Chrome 29 甚至会把失效 poster 渲染为纯灰块。
- 用
<img alt="HTML5视频早期版无poster定位_版本差异处理说明【说明】" >的onerror显式捕获 poster 加载失败 - 避免直接设
background-image到<video></video>上——旧版 Android WebView 不支持该 hack - 推荐方案：用
<div class="video-container"> 包裹 <code><video></video>和同尺寸<img class="poster-fallback" alt="HTML5视频早期版无poster定位_版本差异处理说明【说明】" >，CSS 控制显隐移动端 iOS Safari 的特殊限制
iOS 8–11 的
<video></video>在非用户手势触发时（如页面 onload），即使设了poster，也常被强制覆盖为首帧（如果视频有关键帧）或黑屏。Apple 从未修复此行为。立即学习“前端免费学习笔记（深入）”；
- 必须用
playsinline+webkit-playsinline确保内联播放，否则 poster 可能被全屏遮挡 - 避免设置
autoplay（尤其无muted时），否则 poster 会在极短时间内闪现即消失 - 实测有效做法：延迟 100ms 后调用
video.load()，再监听loadeddata手动显示 poster 元素
video元素 append 到 DOM 后立刻可读，但晚于这个时机检查，就可能错过旧版浏览器的“无 poster”窗口期。 - 必须用
