如何在React Native中实现Vimeo WebView的后台音频播放功能？

• 第一步先完成原生端基础配置，这是后台播放生效的前提，默认App切后台后系统会主动暂停WebView内的媒体播放
  • iOS端：打开Xcode项目，在「Signing & Capabilities」标签下添加Background Modes能力，勾选Audio, AirPlay, and Picture in Picture选项；同时确保Info.plist中已配置NSMicrophoneUsageDescription权限说明
  • Android端：在AndroidManifest.xml中添加媒体播放前台服务权限 <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
• 第二步修改WebView属性和内嵌HTML代码
  • 给WebView新增mediaPlaybackRequiresUserAction={false}属性，iOS端额外新增allowsInlineMediaPlayback={true}属性
  • 调整iframe标签属性，新增播放权限配置allow="autoplay; fullscreen; picture-in-picture"，同时给iframe加id用于调用Vimeo官方播放器API
  • 内嵌JS部分添加页面显隐状态监听，App切后台触发页面隐藏时，主动调用播放器播放方法维持音频输出，也可以按需关闭视频画面降低后台功耗
    修改后的完整代码示例如下：

import WebView from 'react-native-autoheight-webview';
import { Platform } from 'react-native';

<WebView
  allowsFullscreenVideo
  scrollEnabled={false}
  automaticallyAdjustContentInsets
  mediaPlaybackRequiresUserAction={false}
  allowsInlineMediaPlayback={Platform.OS === 'ios'}
  source={{
    html: `
      <html>
        <head>
          <style>
            body { margin: 0; padding: 0; }
            iframe { width: 100%; height: 100%; border: none; }
          </style>
        </head>
        <body>
          <iframe id="vimeo-player" src="替换为你的Vimeo视频URL" allow="autoplay; fullscreen; picture-in-picture"></iframe>
          <script src="https://player.vimeo.com/api/player.js"></script>
          <script>
            const player = new Vimeo.Player('vimeo-player');
            // 监听App切后台触发的页面隐藏事件
            document.addEventListener('visibilitychange', () => {
              if (document.hidden) {
                player.setVolume(1);
                player.play();
              }
            });
          </script>
        </body>
      </html>
    `
  }}
/>

• 适配补充：如果部分Android机型切后台仍然会暂停播放，可以在RN层添加AppState状态监听，当App切换到后台时，通过WebView的injectJavaScript方法主动调用player.play()确保播放不中断

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