视频在 iPhone 上看起来不可见

Question

我正在向我的网站添加视频，这在桌面和 Android Chrome 浏览器上运行完美。然而，在 iOS Safari 上，视频不显示，它只显示一个播放按钮，而不是像其他浏览器那样的视频预览。

如果我单击播放按钮，它将播放视频并按预期播放。我不确定为什么 iOS safari 不像其他浏览器那样显示视频预览，我想解决这个问题。我试过禁用和启用控件，完全摆脱 jQuery 点击功能并尝试使用不同的视频。如果我决定删除控件，它将看起来像一个空框，并且只有在我单击 space 视频时才会起作用。

感谢帮助。

HTML

<div class="row video-row">
  <div class="col-sm-12">
    <div class="vid-wrapper">
      <video class="video" controls playsinline>
        <source src="/public/video/grapevine.mp4" type="video/mp4">
        <source src="/public/video/video/grapevine.ogg" type="video/ogg">
        Sorry, your browser does not support this video.
      </video>
    </div><!-- END WRAPPER -->
  </div><!-- END COL -->
</div><!-- END ROW -->

Answer 1

我知道这听起来适得其反，但如果您添加 autoplay，iOS 浏览器将添加一个 "image"。基本上 iOS 上的 autoplay 将启动播放（就像您单击播放一样），但实际上不会播放（就像它在第一帧暂停一样）。这可能只在某些情况下有效，例如，如果调用视频 API 以使用事件监听器加载视频，它实际上会自动播放。

更新：实际上，我相信您正在寻找 poster="../img.jpg" ，您只是在视频标签的属性中定义海报图像。我将不得不以一种或另一种方式定义、创建和托管图像。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes

视频在 iPhone 上看起来不可见

Video looks invisible on iPhone

html

video

html5-video