在Flutter Webview中全屏播放视频

ep6jt1vc  于 2023-05-01  发布在  Flutter
关注(0)|答案(1)|浏览(253)

我试图在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';
        }
      ''');
            }
          },
        ),
      ),
    );
  }

我试着编辑清单。xml文件,但这不起作用。此外,我试图创建一个全屏按钮,但它也没有工作。

相关问题