HTML5 视频，没有自动播放的设备的不同海报图像

Question

• 视频被用作背景视频。

• 海报图片需要是视频的第一帧，所以当 视频正在加载，没有跳转。

• 在某些设备上，尤其是禁用视频自动播放功能的 iOS 上，我可以选择不同的图像来显示吗？

总结： 如果禁用自动播放，我可以显示不同的海报图片吗？

谢谢。

---

注意：我知道我可以使用媒体查询隐藏/显示内容，但这不适用于 iPad Pro 之类的设备。

如果可能的话，我想要一个不需要检测不同设备的解决方案。

Answer 1

我不知道你会如何做的细节，但我不知道，我建议在某个时候预先运行一个检测脚本。使用“虚拟”视频（可能是数据 URI 中的 1x1px 空白视频，以确保速度和同步性）并启用自动播放，然后在渲染后不久检查它是否正在播放。然后根据它是否播放相应地标记。