Android端youtube_player_iframe内置分享按钮无响应问题求助

问题分析 #

Android端YouTube播放器的三点分享按钮无响应，而Facebook/Twitter分享正常，本质是Android WebView默认拦截了YouTube的分享弹窗，或插件默认WebView配置缺少必要的弹窗支持、DOM存储权限。

解决方案 #

方案1：配置WebView允许弹窗与DOM存储 #

通过自定义WebView的WebChromeClient和WebSettings，让WebView支持YouTube的分享弹窗：

1. 修改AndroidManifest.xml
   添加必要权限（确保已存在）：

   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.SEND"/>
   

2. 自定义WebView配置
   在YoutubePlayerScaffold中替换默认WebView，添加弹窗处理和DOM存储支持：

   Widget build(BuildContext context) {
     return YoutubePlayerScaffold(
       defaultOrientations: const [DeviceOrientation.portraitUp],
       backgroundColor: Colors.black,
       autoFullScreen: false,
       controller: _controller,
       webView: YoutubePlayerWebView(
         onCreateWebView: (controller, context) {
           return WebView(
             initialUrl: controller.initialUrl,
             javascriptMode: JavascriptMode.unrestricted,
             javascriptChannels: controller.javascriptChannels,
             onWebViewCreated: controller.onWebViewCreated,
             onPageFinished: controller.onPageFinished,
             gestureRecognizers: controller.gestureRecognizers,
             webChromeClient: WebChromeClient(
               // 允许WebView创建新窗口（分享弹窗需要）
               onCreateWindow: (_, __) => true,
             ),
             initialSettings: WebSettings(
               domStorageEnabled: true, // 启用DOM存储，YouTube分享依赖此
               javaScriptCanOpenWindowsAutomatically: true,
               allowFileAccess: true,
             ),
           );
         },
       ),
       builder: (context, player) {
         return widget.playerWrapper?.call(player) ?? player;
       },
     );
   }
   

方案2：监听分享事件，用Flutter原生分享替代 #

如果方案1无效，可直接拦截YouTube的分享事件，使用Flutter原生分享插件实现跨平台一致的分享体验：

1. 添加依赖
   在pubspec.yaml中加入share_plus：

   dependencies:
     share_plus: ^7.2.1 # 使用最新稳定版
   

2. 监听分享事件并实现分享
   修改控制器初始化代码，监听YouTube的分享事件，触发原生分享：

   void _initController() {
     _controller = YoutubePlayerController.fromVideoId(
       videoId: YoutubePlayerController.convertUrlToId(widget.url)!,
       autoPlay: false,
       params: const YoutubePlayerParams(
         showFullscreenButton: true,
         showControls: true,
         enableCaption: false,
         enableJavaScript: true,
         showVideoAnnotations: false,
         events: ['onShare'], // 启用分享事件监听
       ),
     );
   
     // 监听分享事件
     _controller.listen((event) {
       if (event is YoutubeShareEvent) {
         final videoUrl = 'https://www.youtube.com/watch?v=${event.videoId}';
         Share.share('分享视频：$videoUrl');
       }
     });
   }
   

额外检查项 #

• 确保Android设备的Android System WebView和Chrome是最新版本（你已确认可跳过）
• 升级youtube_player_iframe到最新稳定版，修复已知WebView兼容问题

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