Flutter WebView中动漫网站视频全屏播放问题求助

针对你在Flutter WebView中无法实现动漫网站视频全屏的问题，以下是分平台的可行解决方案，结合你的现有代码进行修改：

1. 基础依赖确认 #

确保使用最新版的webview_flutter包，在pubspec.yaml中更新：

dependencies:
  webview_flutter: ^4.4.0 # 替换为当前最新版本

2. Android 端配置与代码修改 #

2.1 修改 AndroidManifest.xml #

在android/app/src/main/AndroidManifest.xml中，给MainActivity添加以下配置：

<activity
    android:name=".MainActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:hardwareAccelerated="true"
    android:configChanges="orientation|screenSize|keyboardHidden">
    <!-- 保留原有其他配置 -->
</activity>

• hardwareAccelerated：开启硬件加速是视频播放和全屏功能的必要前提
• configChanges：避免屏幕旋转时WebView重启导致全屏状态丢失

2.2 配置 WebChromeClient 处理全屏回调 #

首先在你的State类中添加状态变量：

bool _isFullScreen = false;
Widget? _fullScreenWidget;

然后修改WebView的参数，添加全屏回调处理：

WebView(
  initialUrl: 'https://website.example',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) {
    _controller = controller;
  },
  // 新增WebChromeClient配置
  webChromeClient: WebChromeClient(
    onShowCustomView: (view, callback) {
      setState(() {
        _isFullScreen = true;
        _fullScreenWidget = Container(child: view);
      });
      callback.onCustomViewHidden();
    },
    onHideCustomView: () {
      setState(() {
        _isFullScreen = false;
        _fullScreenWidget = null;
      });
    },
  ),
  // 保留原有导航代理配置
  navigationDelegate: (navigation) {
    if (_isWhitelisted(navigation.url)) {
      return NavigationDecision.navigate;
    } else {
      return NavigationDecision.prevent;
    }
  },
  // 保留原有页面完成回调，新增视频全屏权限配置
  onPageFinished: (url) {
    Uri uri = Uri.parse(url);
    if (uri.host == 'website.example' && [
      '',
      '/',
      '/index.html',
      '/#/',
    ].contains(uri.path)){
      _controller.evaluateJavascript('''
        // 原有隐藏元素代码
        var container = document.getElementsByClassName('container')[0];
        container.children[0].style.display = 'none';
  
        var elements = document.getElementsByClassName('col-md-12 col-sm-12 col-xs-12');
        for (var i = 0; i < elements.length; i++) {
          elements[i].style.display = 'none';
        }

        // 新增：给所有视频元素添加全屏权限
        var videos = document.getElementsByTagName('video');
        for(var i=0; i<videos.length; i++){
          videos[i].setAttribute('webkitallowfullscreen', 'true');
          videos[i].setAttribute('allowfullscreen', 'true');
        }
      ''');
    }
  },
)

最后修改Scaffold的body，根据全屏状态切换视图：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _isFullScreen
        ? _fullScreenWidget
        : SafeArea(
            child: WebView(
              // 上述完整WebView配置
            ),
          ),
  );
}

3. iOS 端配置与代码修改 #

3.1 修改 Info.plist #

在ios/Runner/Info.plist中添加以下配置：

<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
<key>WKAllowsInlineMediaPlayback</key>
<true/>
<key>WKAllowsPictureInPictureMediaPlayback</key>
<true/>

这些配置允许WebView内联播放视频，并支持全屏切换。

3.2 WebView 额外配置 #

在WebView中添加iOS特定的创建参数：

WebView(
  // 原有配置
  creationParams: WebViewCreationParams(
    allowsInlineMediaPlayback: true,
  ),
  creationParamsCodec: const StandardMessageCodec(),
)

关键说明 #

• 之前修改manifest未生效，核心原因是缺少WebChromeClient对全屏回调的处理，Android系统需要通过该回调完成全屏视图的切换
• iOS必须开启allowsInlineMediaPlayback，否则视频会自动跳转到系统播放器，无法在WebView内实现全屏
• 注入JS给视频元素添加allowfullscreen属性，确保网站的视频元素具备触发全屏请求的权限

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