防止视频元素在 iPhone 上全屏显示

Question

我有一个 ThreeJS 项目，其中将视频用作 3D 对象上的纹理。为了将视频放入纹理中，我在页面上隐藏了一个视频元素。

在多个设备和浏览器上测试我的项目时，我发现仅在 iPhone 上的 Safari 上发生的行为（在 iPad 上的 Safari、iPhone 上的 Chrome 或任何其他系统/浏览器组合中不会发生）。当视频元素开始播放时，Safari 会自动全屏显示视频。我根本不希望视频元素可见。

有没有某种方法可以标记视频元素以使这种行为不会发生？

我如何声明视频元素的相关部分如下。

<video id="primaryVideo" src="videos/clip00.mp4" class="hidden" loop  />


.hidden { 
    display:none;
}

Answer 1

找到了答案。将属性添加playsinline到视频元素即可解决此问题。

<video id="primaryVideo" playsinline src="videos/clip00.mp4" class="hidden" loop  />