在 Flutter Webview 中全屏播放视频

Question

我正在尝试在 Flutter WebView 中以全屏模式播放视频。视频来自动漫网站。我在网上找不到任何解决方案，所以我在这里写信希望找到一个不仅能帮助我而且能帮助其他面临类似问题的人的答案。

这是我用于 webview 的内容：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://website.example',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (controller) {
            _controller = controller;
          },
          navigationDelegate: (navigation) {
            if (_isWhitelisted(navigation.url)) {   // a white list of websites which are allowed to get access to 
              return NavigationDecision.navigate;
            } else {
              return NavigationDecision.prevent;
            }
          },
          onPageFinished: (url) {
            Uri uri = Uri.parse(url);
            if (uri.host == 'website.example' && [
              '',
              '/',
              '/index.html',
              '/#/',
            ].contains(uri.path)){
              // Inject JavaScript code to hide the first child div after class "container"
              _controller.evaluateJavascript('''
        var container = document.getElementsByClassName('container')[0];
        container.children[0].style.display = 'none';
  
        // Hide any element of the class "col-md-12 col-sm-12 col-xs-12"
        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';
        }
      ''');
            }
          },
        ),
      ),
    );
  }

我尝试编辑 manifest.xml 文件，但没有用。此外，我尝试创建一个全屏按钮，但它也没有用。

Answer 1

不使用 WebView，而是使用这个库从 URL 加载视频：https://pub.dev/packages/video_player