Flutter使用video_player播放网络视频遇白屏及SSL错误求助

问题现象 #

使用video_player: ^2.4.5包播放网络视频时，打开页面后显示白屏，无法正常加载播放。

代码实现 #

class VideoPlayerScreenState extends State<VideoPlayerScreen> {
  var controller;
  var youTubVideoPlayerController;

  @override
  void initState() {
    controller = VideoPlayerController.network(
        widget.initialUrl.toString() ?? 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4');
    loadVideoPlayer();
    super.initState();
  }

  loadVideoPlayer() {
    controller.addListener(() {
      setState(() {
        print(widget.initialUrl);  // 此处输出正常
      });
    });
    // 从此处开始执行失败
    controller.initialize().then((value) {
      print("Load Video Player Initialized 1111");
      setState(() {
        print("Load Video Player Initialized 2222");
      });
    });
  }
}

代码运行输出 #

I/flutter (17062): https://www.privilegeapps.com/images/materials/1658523313file.mp4
E/flutter (17062): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: PlatformException(VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null)

关键日志信息 #

E/ExoPlayerImplInternal(17062): Playback error
E/ExoPlayerImplInternal(17062):   com.google.android.exoplayer2.ExoPlaybackException: Source error
E/ExoPlayerImplInternal(17062):   Caused by: com.google.android.exoplayer2.upstream.HttpDataSource$HttpDataSourceException: javax.net.ssl.SSLHandshakeException: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

flutter doctor 检测结果 #

[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.19044.1826], locale en-US)
    • Flutter version 3.0.5 at C:\Users\sayed\Documents\flutter_windows_2.2.3-stable\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (3 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\sayed\AppData\Local\Android\sdk
    • Platform android-33, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] VS Code (version 1.69.2)
    • VS Code at C:\Users\sayed\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.36.0

[√] VS Code, 64-bit edition (version 1.63.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.36.0

[√] Connected device (4 available)
    • DRA LX2 (mobile)  • 5LX9K18817915788 • android-arm64  • Android 8.1.0 (API 27)
    • Windows (desktop) • windows          • windows-x64    • Microsoft Windows [Version 10.0.19044.1826]
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 103.0.5060.134
    • Edge (web)        • edge             • web-javascript • Microsoft Edge 103.0.1264.77

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

解决方案 #

1. 核心问题定位 #

从日志中的Trust anchor for certification path not found可以确定，问题出在服务器SSL证书不被Android系统信任，导致ExoPlayer无法建立安全连接加载视频源。

2. 分步解决 #

（1）验证视频URL的证书有效性

在浏览器中打开目标视频URL，检查证书是否有警告。如果是自签名证书或未被公共CA颁发的证书，需要处理证书信任问题。

（2）测试备选URL验证代码正确性

先使用示例URL https://samplelib.com/lib/preview/mp4/sample-5s.mp4 替换目标URL，确认代码本身是否能正常播放视频，排除代码逻辑问题。

（3）Android端证书信任配置

• 临时测试方案（不推荐生产环境）：
  在android/app/src/main/res/xml目录下创建network_security_config.xml文件，添加以下内容允许特定域名的不安全连接：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <domain-config cleartextTrafficPermitted="true">
          <domain includeSubdomains="true">privilegeapps.com</domain>
      </domain-config>
  </network-security-config>
  

  然后在AndroidManifest.xml的<application>标签中添加：

  android:networkSecurityConfig="@xml/network_security_config"
  

• 生产环境方案：
  将服务器的SSL证书导出为.cer文件，放置在android/app/src/main/res/raw目录下，然后修改network_security_config.xml信任该证书：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <domain-config>
          <domain includeSubdomains="true">privilegeapps.com</domain>
          <trust-anchors>
              <certificates src="@raw/your_certificate"/>
              <certificates src="system"/>
          </trust-anchors>
      </domain-config>
  </network-security-config>
  

（4）代码优化

• 添加错误监听，捕获播放异常：

  loadVideoPlayer() {
    controller.addListener(() {
      setState(() {
        if (controller.value.hasError) {
          print('播放错误: ${controller.value.errorDescription}');
        }
      });
    });
    controller.initialize().then((value) {
      setState(() {});
    }).catchError((error) {
      print('初始化失败: $error');
    });
  }
  

• 确保控制器在页面销毁时释放：

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
  

内容的提问来源于stack exchange，提问作者Saayeed M Daawoud