You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中使用Chewie/video_player播放MPG/MPEG/MOV视频黑屏求助

解决Flutter播放MPEG/MPG/MOV视频黑屏问题

问题根源

Flutter的video_player和基于它的chewie依赖平台原生播放器(Android的MediaPlayer/ExoPlayer、iOS的AVPlayer),这些原生播放器对MPEG-1/2编码的MPG、部分MOV格式支持有限——尤其是MPEG-2编码在Android默认环境和iOS中都不属于原生支持的编码格式,这是导致黑屏的核心原因。

解决方案

1. 确认视频编码信息

先排查视频本身的编码参数,用ffmpeg命令查看:

ffmpeg -i https://storage.googleapis.com/tvri-dev-assets/AYO%20KE%20MUSEUM/AKM21_001A.mpg

如果输出显示视频编码为mpeg2video(MPEG-2),即可确认是原生播放器不支持导致的黑屏。

2. 转码为兼容格式(推荐)

将视频转码为跨平台支持最好的H.264编码+AAC音频的MP4格式,用ffmpeg执行以下命令:

ffmpeg -i input.mpg -c:v libx264 -preset medium -crf 23 -c:a aac -b:a 128k output.mp4

转码后的视频可以直接被video_player和chewie正常播放。

3. 使用扩展格式支持的播放器插件

如果无法转码,改用对更多格式提供支持的Flutter播放器插件:

  • better_player:基于chewie和video_player扩展,集成了更多解码器,支持MPEG-2等格式
  • flutter_ffmpeg:配合video_player使用,可通过FFmpeg解码后播放

以better_player为例,替换chewie的初始化逻辑:

Future<void> initializePlayer() async {
  BetterPlayerConfiguration betterPlayerConfiguration = const BetterPlayerConfiguration(
    aspectRatio: 16/9,
    fit: BoxFit.contain,
  );
  BetterPlayerDataSource dataSource = BetterPlayerDataSource(
    BetterPlayerDataSourceType.network,
    srcs[currPlayIndex],
  );
  _betterPlayerController = BetterPlayerController(betterPlayerConfiguration);
  _betterPlayerController.setupDataSource(dataSource);
  setState(() {});
}

4. 优化现有初始化代码

你的代码中初始化了两个完全相同的VideoPlayerController,属于冗余操作,既浪费资源还可能引发不必要的状态问题,建议简化为单个控制器:

Future<void> initializePlayer() async {
  _videoPlayerController = VideoPlayerController.network(srcs[currPlayIndex]);
  await _videoPlayerController.initialize();
  _createChewieController();
  setState(() {});
}

内容的提问来源于stack exchange,提问作者CCP

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 03:42:21