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

Question

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

在多个设备和浏览器上测试我的项目时，我发现一个行为只发生在 iPhone 的 Safary 上（它不会发生在 iPad 或 [=24 的 Safary 上=] 在 iPhone 上，或 systems/browser 的任何其他组合）。当视频元素开始播放时，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  />

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

Prevent Video Element from going Full Screen on iPhone

safari

video

mobile-safari

ios