如何在Android端通过react-native-webview实现嵌入视频默认全屏播放？

架构老林

2026-8-12

解决React Native WebView Android端Youtube/Vimeo视频默认全屏播放问题

针对Youtube的处理

放弃直接在视频链接加fs=1的方式，改用Youtube Embed链接配合JS注入实现强制全屏：

使用Embed格式URL：https://www.youtube.com/embed/[视频ID]?rel=0&autoplay=0

在WebView的injectJavaScript属性中注入监听播放触发的脚本：

document.addEventListener('click', function(e) {
  const video = document.querySelector('video');
  if ((e.target.tagName === 'VIDEO' || e.target.closest('.html5-video-player')) && video && !video.webkitDisplayingFullscreen) {
    video.webkitEnterFullscreen();
  }
});

配置WebView的核心参数：

<WebView
  source={{ uri: 你的Youtube Embed链接 }}
  allowsFullscreenVideo={true}
  androidHardwareAccelerationDisabled={false}
  injectedJavaScript={上述JS代码}
  javaScriptEnabled={true}
/>

针对Vimeo的处理

Vimeo的fullscreen=1参数在Android WebView中受限，同样通过JS注入实现：
1. 使用Vimeo Embed链接：https://player.vimeo.com/video/[视频ID]?fullscreen=1
2. 注入监听播放事件的脚本：
```
document.addEventListener('play', function(e) {
  if (e.target.tagName === 'VIDEO') {
    e.target.requestFullscreen().catch(err => {
      console.log('全屏触发失败:', err);
    });
  }
}, true);
```
3. 确保WebView开启allowsFullscreenVideo={true}和javaScriptEnabled={true}

Android原生配置补充

检查AndroidManifest.xml中对应Activity的配置，添加必要属性：

<activity
  android:name=".MainActivity"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize">
  <meta-data
    android:name="android.app.lib_name"
    android:value="app" />
</activity>

若需要沉浸式全屏，可在Activity主题中添加android:windowFullscreen=true