iOS端React Native WebView加载HTML背景视频弹出独立播放器问题

核心原因是iOS端WKWebView默认关闭了视频内联播放权限，仅靠网页端的playsinline属性无法触发内联渲染，按以下两步调整即可解决，且不会影响App内其他视频的正常加载、播放逻辑： #

1. 调整react-native-webview组件配置 #

仅在加载该React网页的WebView实例上添加以下两个属性，不要全局修改WebView通用配置，即可保证其他页面的视频播放逻辑不受影响：

<WebView
  // 保留你原有所有配置项
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
/>

• allowsInlineMediaPlayback={true}：开启iOS WebView的视频内联播放权限，是iOS端专属配置，安卓端会自动忽略该属性
• mediaPlaybackRequiresUserAction={false}：允许视频自动播放，匹配背景视频自动播放的需求，不会拦截用户主动触发的其他视频播放行为

2. 补全网页端video标签的兼容属性 #

现有video标签缺少iOS WebView识别的webkit前缀内联标记，修改后代码如下：

<video 
  alt="second slide" 
  class="hero--video" 
  autoplay 
  loop 
  muted 
  playsinline
  webkit-playsinline
  x5-playsinline
  id="html5_video_vgqpodxt0jc2113" 
  style="max-width: 100%; height: auto; width: 100%;"
>
  <source src="https://mition.blob.core.windows.net/mition/PRODUCTION/media/World%20-%201992.mp4" type="video/mp4" /> 
  Sorry, your browser doesn't support embedded videos.
</video>

• 新增的webkit-playsinline是iOS WebView识别内联视频的必填标记，通用属性playsinline仅对iOS 10+的Safari浏览器生效，对App内的WebView不生效
• 新增的x5-playsinline为安卓X5内核兼容属性，无任何副作用
• 必须保留muted属性，iOS系统对非静音的自动播放视频有强制拦截策略，静音状态下的自动播放+内联渲染才会被系统放行

校验说明 #

配置完成后，背景视频会在WebView内正常内联循环自动播放，其他业务视频如果需要调用原生播放器全屏播放，只要不给对应video标签加上述内联属性即可，播放逻辑完全不受本次修改影响。

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