视频会自动在 Safari 浏览器、iPhone 中打开

Question

我有一个部分，可以在没有控件访问的情况下播放静音、循环的视频。

就在昨天，我发现了 Safari 浏览器的问题，因为它以全屏方式打开该视频，并启用了音频和控件，当视频结束时，视频就像什么也没发生一样折叠起来。每次渲染页面时都会发生。

经过一些研究，我尝试添加 playsinline （这是 React 中的 playsInline），甚至是 webkit-playsinline="true"。但事实证明，只有当您向下滚动到该视频的视图时，Safari 浏览器才允许打开该视频。但我根本不希望它被打开，我希望它保持静态。

如何防止视频在 Safari 浏览器上全屏打开？

以下是我的视频标签的示例：

<video autoPlay muted loop>
    <source
      type="video/mp4"
      src={mainVideo}
      autoPlay
      muted
      loop
      playsInline
      webkit-playsinline="true"
    ></source>
</video>

Answer 1

所以您实际上是对的，将

playsInline

和

webkit-playsinline="true"

属性添加到视频元素中。但野生动物园有时是不可预测的。因此，也许可以尝试将具有值

controlsList

的

nodownload

属性添加到视频元素中。此属性可防止视频控件出现，这可能有助于防止全屏行为。

请参阅下面的代码。

<video autoPlay muted loop controlsList="nodownload">
  
Hope that helps :)