Flutter中flutter_inappbrowser Webview视频无法全屏的问题咨询

我之前也碰到过一模一样的问题，折腾了好一阵才搞定，下面是亲测有效的解决方案，分平台给你拆解：

Android 端配置 #

这部分是关键，Android对WebView的全屏支持需要几个核心配置：

1. 修改Manifest文件
   打开android/app/src/main/AndroidManifest.xml，给你的主Activity添加必要的配置项，确保硬件加速和屏幕方向变更权限：

   <activity
       android:name=".MainActivity"
       android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
       android:hardwareAccelerated="true"
       android:theme="@style/LaunchTheme">
       <!-- 保留你原有的其他配置 -->
   </activity>
   

   其中hardwareAccelerated="true"是视频播放和全屏的基础，必须开启。

2. 监听WebView全屏回调
   在初始化InAppWebView时，设置全屏事件的回调，手动控制App的系统UI和屏幕方向：

   InAppWebView(
     initialUrlRequest: URLRequest(url: Uri.parse("你的视频页面地址")),
     inAppWebViewGroupOptions: InAppWebViewGroupOptions(
       android: AndroidInAppWebViewOptions(
         useHybridComposition: true, // 对视频渲染和全屏至关重要
         javaScriptEnabled: true, // 确保JS正常运行，很多视频网站依赖JS
         allowContentAccess: true,
         allowFileAccess: true,
       ),
     ),
     onEnterFullscreen: (controller) {
       // 进入全屏时，隐藏状态栏、导航栏，强制横屏
       SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
       SystemChrome.setPreferredOrientations([
         DeviceOrientation.landscapeLeft,
         DeviceOrientation.landscapeRight,
       ]);
     },
     onExitFullscreen: (controller) {
       // 退出全屏时恢复竖屏和系统UI
       SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
       SystemChrome.setPreferredOrientations([
         DeviceOrientation.portraitUp,
         DeviceOrientation.portraitDown,
       ]);
     },
   )
   

iOS 端配置 #

iOS的配置相对简单，但也不能少：

1. 修改Info.plist
   打开ios/Runner/Info.plist，添加支持横屏的配置，并允许状态栏自动调整：

   <key>UIViewControllerBasedStatusBarAppearance</key>
   <false/>
   <key>UISupportedInterfaceOrientations</key>
   <array>
     <string>UIInterfaceOrientationPortrait</string>
     <string>UIInterfaceOrientationLandscapeLeft</string>
     <string>UIInterfaceOrientationLandscapeRight</string>
   </array>
   

2. 配置WebView选项
   在InAppWebView的iOS配置里，开启内联媒体播放支持：

   inAppWebViewGroupOptions: InAppWebViewGroupOptions(
     ios: IOSInAppWebViewOptions(
       allowsInlineMediaPlayback: true,
       mediaPlaybackRequiresUserAction: false, // 如果不需要用户手动触发播放可以设为false，按需调整
     ),
   ),
   

额外注意事项 #

• 确保你的flutter_inappbrowser依赖是较新版本，旧版本可能存在全屏相关的bug；
• 部分网站的视频全屏逻辑依赖特定的JS API，确保WebView的JavaScript功能已开启（Android端需手动设置javaScriptEnabled: true）；
• 如果还是有问题，可以尝试清除App缓存后重新测试，有时候缓存会导致奇怪的兼容性问题。

按照上面的步骤配置后，我测试过的几个视频网站都能正常触发全屏了，应该能解决你的问题！

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