如何实现React-player移动端播放启动时禁用自动全屏

问题根因 #

移动端触发播放时自动进入全屏，是移动端浏览器的原生默认逻辑导致的：未开启内联播放标识的视频，会被iOS Safari、微信/QQ内置的X5内核浏览器强制拉起系统全屏播放器。react-player组件默认没有主动给底层video标签注入适配移动端的内联播放配置，因此会触发浏览器的默认全屏行为。

具体修复方案 #

• 补充组件级的内联播放属性，从根上关闭移动端自动全屏的触发逻辑
• 修正原有代码的语法错误：原代码中playing}存在多余的闭合大括号，会导致组件渲染异常
• 针对国内安卓X5内核的内置浏览器补充专属配置，避免内核层强制拦截播放跳转全屏

修改后的可直接运行的配置代码 #

<ReactPlayer
  url={'https://www.testvideo.mp4'}
  width="100%"
  height="100%"
  controls
  muted
  playing
  playsInline // 核心配置：告知移动端浏览器支持视频内联播放，不自动切换全屏
  config={{
    file: {
      attributes: {
        // 适配X5内核浏览器的专属配置
        'x5-video-player-type': 'h5',
        'x5-video-player-fullscreen': 'false',
        'x5-video-orientation': 'portraint'
      }
    }
  }}
/>

最终效果 #

配置生效后，视频启动播放会始终保持在预设的容器尺寸范围内：

• 桌面端的播放交互和原有表现完全一致
• 移动端触发播放时不会自动进入全屏，仅保留控制器上的手动全屏入口，用户有需求时可点击按钮自主切换全屏模式

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