如何让 HTML5 视频播放器在 Safari 或 iOS 上显示预览？答案

【问题标题】：How to get HTML5 video player to display a preview on safari or iOS?如何让 HTML5 视频播放器在 Safari 或 iOS 上显示预览？
【发布时间】：2022-02-17 16:50:37
【问题描述】：

如果我在我的网站上嵌入了 HTML5 视频播放器，它不会在 Safari 中显示任何预览。

在其他浏览器上，我看到了预览。我尝试了顶级解决方案Here，但它对我不起作用，而是显示一个没有播放按钮的黑色播放器。

这大致是我用来渲染播放器的代码。

<video width="320" height="240" controls>
    <source src="some.url">
</video>

我希望在后台看到带有播放图标和视频预览图像的视频播放器。

相反，我看到一个空白的白色背景，只有一个播放按钮。

编辑：理想情况下，我可以在没有海报属性的情况下执行此操作，因为我想避免对视频进行额外处理以提取图像 + 必须存储和传输图像。

【问题讨论】：

标签： html css safari

【解决方案1】：

您需要在video 标签上添加一些附加属性。

<video controls poster="Here is the poster image what you want">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

【讨论】：

理想情况下，我可以在没有海报属性的情况下执行此操作，因为我想避免对视频进行额外处理以提取图像 + 必须存储和传输图像。