如何禁用iOS系统中HTML5 video标签的自动全屏模式

问题原因及修复方案 #

playsInline属性在iPhone Safari环境下未生效通常是缺少必要的兼容配置导致，常见问题点如下：

• 缺少webkit前缀兼容属性
  iOS 10及更早版本的Safari仅识别webkit-playsinline属性，新版系统也存在部分场景下需要两个属性同时配置才会生效的情况，你当前的代码只加了playsInline未补充前缀属性。
• 播放触发条件不符合Safari限制
  如果你的视频设置了autoplay属性，必须同时添加muted属性，iPhone Safari禁止有声视频自动播放，不满足该条件时系统会强制拉起全屏播放器。
• 框架属性渲染异常
  如果你使用React/Vue等前端框架，可打开Safari移动端调试工具检查真实DOM上的video标签属性，确认驼峰写法的playsInline被正确渲染为全小写的playsinline属性，部分框架的自定义属性处理逻辑可能会导致属性丢失。

修正后的代码示例 #

<video
  playsInline
  webkit-playsinline="true"
  muted
  id="video"
>
  <source src={props.video} />
  Your browser does not support the <code>video</code> element.
</video>

额外注意事项 #

• 如果视频是嵌套在App的WebView中使用，需要原生端先开启WebView的内联播放配置，仅前端配置属性无法生效。
• 视频播放必须由用户主动交互（点击/触摸事件）触发，不要在play方法调用前添加异步逻辑，否则Safari会判定为非用户主动操作，强制拉起全屏播放器。

内容的提问来源于stack exchange，提问作者dan_boy