Flutter WebView中调用MX Player/VLC等外部视频播放器方案咨询

当然可行！我之前做过类似的需求，核心思路是拦截WebView中的视频请求/获取视频真实URL，然后调用Android系统的Intent来唤起MX Player、VLC这些外部播放器。下面是具体的实现步骤，亲测有效：

1. 添加必要的依赖 #

首先在你的pubspec.yaml里添加所需依赖（建议用最新稳定版）：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0  # WebView核心依赖
  url_launcher: ^6.2.0     # 唤起外部应用的工具
  url_launcher_android: ^6.2.0  # 针对Android的Intent扩展

2. 配置WebView拦截视频链接 #

这里提供两种拦截方案，根据你的网站场景选择：

方案一：直接拦截视频格式的URL（适合简单场景） #

如果目标网站的视频链接是直接暴露的.mp4/.m3u8等格式，可以通过WebView的导航请求拦截：

WebView(
  initialUrl: "你的目标网站地址",
  javascriptMode: JavascriptMode.unrestricted,
  onNavigationRequest: (request) {
    // 定义需要拦截的视频后缀，可根据需求扩展
    final videoExtensions = ['mp4', 'm3u8', 'avi', 'mov', 'flv'];
    final url = request.url.toLowerCase();
    
    for (var ext in videoExtensions) {
      if (url.endsWith('.$ext')) {
        // 拦截请求，不加载到WebView，直接唤起外部播放器
        _launchExternalPlayer(request.url);
        return NavigationDecision.prevent;
      }
    }
    return NavigationDecision.navigate;
  },
)

方案二：注入JS监听视频点击（通用方案） #

很多网站的视频是通过JS动态加载的，直接拦截URL抓不到真实地址。这时候可以注入JavaScript监听视频元素的点击事件，获取真实播放链接：

WebViewController? _controller;

WebView(
  initialUrl: "你的目标网站地址",
  javascriptMode: JavascriptMode.unrestricted,
  // 建立Flutter和JS的通信通道
  javascriptChannels: {
    JavascriptChannel(
      name: 'VideoChannel',
      onMessageReceived: (JavascriptMessage message) {
        // 接收JS传来的视频URL，唤起外部播放器
        _launchExternalPlayer(message.message);
      },
    ),
  },
  onPageFinished: (url) {
    // 页面加载完成后注入JS，监听所有video元素的点击
    final jsCode = """
      document.querySelectorAll('video').forEach(video => {
        video.addEventListener('click', () => {
          // 获取视频真实播放地址（兼容不同网站的写法）
          const videoUrl = video.src || video.currentSrc;
          if (videoUrl) {
            VideoChannel.postMessage(videoUrl);
          }
        });
      });
    """;
    _controller?.runJavascript(jsCode);
  },
  onWebViewCreated: (controller) {
    _controller = controller;
  },
)

3. 实现唤起外部播放器的逻辑 #

用url_launcher构建Android Intent，让系统弹出可选的视频播放器列表（也可以指定直接打开某款播放器）：

import 'package:url_launcher/url_launcher.dart';
import 'package:url_launcher_android/url_launcher_android.dart';

Future<void> _launchExternalPlayer(String videoUrl) async {
  final uri = Uri.parse(videoUrl);
  if (await canLaunchUrl(uri)) {
    if (defaultTargetPlatform == TargetPlatform.android) {
      final intent = AndroidIntent(
        action: 'android.intent.action.VIEW',
        data: uri.toString(),
        type: 'video/*', // 指定类型为视频，过滤非播放器应用
        // 可选：直接指定打开MX Player，注释掉则弹出系统选择器
        // package: 'com.mxtech.videoplayer.ad'
      );
      await intent.launch();
    }
  } else {
    throw '无法打开该视频链接: $videoUrl';
  }
}

4. 特殊情况处理 #

• Cookie验证的视频：如果网站需要Cookie才能播放视频，你需要通过webview_flutter的CookieManager获取当前WebView的Cookie，然后在唤起播放器时把Cookie附加到请求头里（这部分需要原生层配合，可通过Platform Channel实现）。
• 流媒体格式支持：MX Player和VLC都支持.m3u8等流媒体格式，无需额外配置。

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