HTML 视频在 IOS 设备中弹出

Question

我完全不知道为什么这么简单的事情在 IOS 中会出现这么多问题。

我有一个简单的视频元素。

<video src='/assets/videos/Our-Story.mp4' className='ourstory-video' autoPlay muted playsInline loop>
</video>

在某些 IOS 设备中这可以正常工作。 但在其他（包括一些较新的型号）中，视频会弹出并自动全屏播放。这绝对不是我想要发生的事情。

经过研究，我添加了

playsInline

和

muted

标签。并保留标签驼峰式大小写，因为它是一个 React 应用程序。

简单地说，当页面加载时，我只需要视频在容器内播放，而不是全屏弹出。

任何帮助我走向正确方向的帮助将不胜感激。

Answer 1

我建议你尝试这两件事

首先：添加“控件”属性 这将显示默认视频控件，允许用户单独播放或暂停视频，这可能会阻止全屏自动播放。

我推荐的第二件事是设置 “webkit-playsinline” 属性

<video
src='/assets/videos/Our-Story.mp4'
className='ourstory-video'
autoPlay
muted
playsinline
loop
controls
webkit-playsinline>
</video>

顺便说一句，据我所知，在反应中你应该使用小写字母而不是驼峰式字母大小写

Answer 2

确保在视频组件中添加以下属性。自动播放、控制、播放内联、静音、循环