如何在Flutter应用中播放.m3u8（HLS）视频流频道？

方案1：使用better_player包 #

这个包基于video_player和Chewie封装，原生支持HLS（.m3u8）流播放，配置简单且功能完善。

1. 先在pubspec.yaml中添加依赖：

dependencies:
  better_player: ^0.0.85 # 建议使用pub上的最新版本

2. 基础播放示例代码：

import 'package:better_player/better_player.dart';

BetterPlayerController _playerController;

@override
void initState() {
  super.initState();
  // 配置播放器基础参数
  final playerConfig = BetterPlayerConfiguration(
    aspectRatio: 16/9,
    fit: BoxFit.contain,
    autoPlay: true,
  );
  // 绑定m3u8流地址
  final dataSource = BetterPlayerDataSource(
    BetterPlayerDataSourceType.network,
    "你的.m3u8网络流地址",
  );
  _playerController = BetterPlayerController(playerConfig);
  _playerController.setupDataSource(dataSource);
}

@override
Widget build(BuildContext context) {
  return BetterPlayer(controller: _playerController);
}

方案2：给video_player补全HLS支持 #

video_player在iOS端依赖系统AVPlayer，默认支持HLS；但Android端需要额外引入ExoPlayer的HLS扩展组件：

1. 在android/app/build.gradle中添加ExoPlayer扩展依赖：

dependencies {
  // 保留原有依赖，新增以下行
  implementation 'com.google.android.exoplayer:exoplayer-hls:2.X.X'
  // 注意：版本号需与video_player依赖的ExoPlayer版本一致，可查看pub上video_player的说明文档
}

2. 之后即可用video_player正常播放：

import 'package:video_player/video_player.dart';

VideoPlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.networkUrl(Uri.parse("你的.m3u8流地址"))
    ..initialize().then((_) {
      setState(() {});
      _controller.play();
    });
}

@override
Widget build(BuildContext context) {
  return _controller.value.isInitialized
      ? AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        )
      : const Center(child: CircularProgressIndicator());
}

方案3：自定义FFmpeg解码（进阶需求） #

如果需要对视频流做自定义解码、转码处理，可以结合flutter_ffmpeg包和Flutter的Texture组件实现，但这种方式开发成本较高，仅推荐给有特殊需求的场景。

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