Flutter使用flutter_inappwebview控制Facebook视频报错无法播放

报错核心为Facebook JS SDK不允许在about:blank页面环境下初始化运行，flutter_inappwebview默认加载InAppWebViewInitialData传入的本地HTML字符串时，页面上下文地址为about:blank，触发FB SDK安全校验规则，导致SDK初始化失败、视频无法加载交互。

1. 补全HTML结构并添加base标签 #

在HTML代码中补全<head>标签，添加base字段指定合法域名上下文，规避FB SDK的环境校验：

<html>
<head>
<base href="https://www.facebook.com">
</head>
<body>
<!-- 原有代码保持不变 -->
</body>
</html>

2. 开启InAppWebView必要权限配置 #

给InAppWebView添加初始化参数，开启JavaScript执行权限、媒体播放权限，放宽跨域限制：

InAppWebView(
  initialData: InAppWebViewInitialData(data: player),
  // 新增配置项
  initialOptions: InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      useWideViewPort: true,
      loadWithOverviewMode: true,
      mediaPlaybackRequiresUserGesture: false,
    ),
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,
      allowUniversalAccessFromFileURLs: true,
    ),
  ),
  // 原有onConsoleMessage、onWebViewCreated逻辑保持不变
)

3. 升级FB SDK版本 #

将FB.init配置中的version字段从v3.2升级为最新稳定版，建议使用v18.0及以上版本，避免旧版本兼容性问题。

4. 实现Flutter端视频控制逻辑 #

通过JS和Flutter的通信通道暴露视频控制能力，实现App端操控视频：

• JS侧修改：拿到视频实例后，将控制方法挂载到window对象，同时通知Flutter端初始化完成

if (msg.type === 'video') {
  my_video_player = msg.instance;
  // 通知Flutter端视频就绪
  window.flutter_inappwebview.callHandler('videoReady');
  // 挂载控制方法
  window.fbVideoPlay = () => my_video_player.play();
  window.fbVideoPause = () => my_video_player.pause();
  window.fbVideoGetDuration = () => my_video_player.getDuration();
}

• Flutter侧修改：注册监听回调，需要控制视频时调用对应JS方法

onWebViewCreated: (webController) {
  controller = webController;
  // 注册视频就绪回调
  controller.addJavaScriptHandler(handlerName: 'videoReady', callback: (args) {
    // 此处可更新状态，标识视频已可操控
  });
}

// 示例：点击按钮触发播放
void playVideo() {
  controller.evaluateJavascript(source: "window.fbVideoPlay()");
}

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