Question

我正在将视频添加到我的网站，该视频在台式机和Android Chrome浏览器上完美运行。但是，在iOS Safari上，不显示视频，它仅显示播放按钮，而不像其他浏览器一样显示视频预览。

如果单击播放按钮，它将播放视频并按预期播放。我不确定为什么iOS Safari不会像其他浏览器一样显示视频预览，我想解决这个问题。我尝试禁用和启用控件，完全摆脱jQuery click功能，然后尝试播放其他视频。如果我决定删除控件，它将看起来像一个空盒子，并且只有在我单击视频所在的空间后才能正常工作。

感谢您的帮助。

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浏览器将添加一个“图像”。基本上，autoplay在iOS上会开始播放（就像您单击播放一样），但实际上不会播放（例如在第一帧暂停）。这可能仅在某些情况下有效，例如，如果调用视频API以使用事件监听器加载视频，则该视频实际上会自动播放。

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

视频在iPhone上看起来不可见

1 个答案: