HTML5 video标签：<img>与poster属性作为fallback图的差异及适配方案

2. 三种实现的浏览器表现拆解 #

我们分不同场景来看各自的表现：

场景1：浏览器支持HTML5 <video>

• <video src="/video.mp4" poster="/fallback-image.png" />：
  视频加载过程中显示poster图；视频加载成功后，点击播放就会切换到视频画面；如果视频加载失败（比如资源不存在、格式不支持），大部分浏览器会显示自带的错误占位（比如带叉的播放按钮），不会额外显示其他内容。
• <video src="/video.mp4"><img src="/fallback-image.png" /></video>：
  视频加载时没有自定义占位，会显示浏览器默认的播放控件占位（比如灰色背景+播放图标）；视频正常播放则一切正常；如果视频完全无法播放，部分浏览器会渲染内部的<img>作为替代，但不同浏览器的表现存在差异。
• <video src="/video.mp4" poster="/fallback-image.png"><img src="/fallback-image.png" /></video>：
  视频加载时显示poster图；视频正常播放则切换到视频画面；如果视频加载失败，部分浏览器会显示内部的<img>，同时覆盖了poster的体验优势，场景覆盖更完整。

场景2：浏览器不支持HTML5 <video>

• 第一种实现：浏览器会直接忽略整个<video>标签，页面上不会显示任何内容。
• 第二种实现：浏览器会把<video>标签当成普通容器，直接渲染内部的<img>，用户能正常看到这张 fallback 图。
• 第三种实现：和第二种表现一致，浏览器忽略<video>的属性，直接渲染内部的<img>。

场景3：系统限制/视频加载缓慢

• 加载缓慢时：只有带poster的实现（第一、第三种）会显示自定义预览图，第二种会显示浏览器默认占位，体验较差。
• 系统限制（比如禁用自动播放、网络限制加载视频）时：poster图会一直显示直到用户触发播放，而内部<img>只有在视频完全无法加载时才会出现。

3. 跨浏览器首选方案与合理性 #

首选实现就是第三种：同时使用poster属性和内部的<img> fallback。

这种组合的合理性拉满，因为两者各司其职、互不冲突：

• poster负责优化支持视频的浏览器的加载体验，给用户清晰的视觉提示，避免空白或默认占位的生硬感；
• 内部<img>负责兜底那些完全不支持HTML5视频的老旧浏览器，或者视频资源彻底失效的极端情况，保证用户至少能看到一张相关的图片内容。

它覆盖了从“支持视频但加载慢”到“完全不支持视频”的所有场景，是兼顾体验和兼容性的最优解。

内容的提问来源于stack exchange，提问作者Slava