flutter如何播放m3u8格式视频

在Flutter中如何播放m3u8格式的视频？我尝试了video_player插件，但似乎不支持m3u8流媒体。有没有其他推荐的插件或解决方案？需要支持Android和iOS平台，最好能提供简单的代码示例。

2 回复

使用video_player插件，结合chewie增强UI控制。需在pubspec.yaml添加依赖，并在代码中初始化控制器加载m3u8链接。支持网络和本地播放。

更多关于flutter如何播放m3u8格式视频的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中播放M3U8格式视频，推荐使用 video_player 插件（官方维护）或 better_player 插件（功能更丰富）。以下是具体实现方法：

1. 使用 video_player 插件（基础方案）

步骤：

  1. 添加依赖：
    dependencies:
  video_player: ^2.8.2
  2. 实现代码：
    import 'package:video_player/video_player.dart';

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 替换为你的M3U8链接
    _controller = VideoPlayerController.network(
      'https://example.com/your-video.m3u8',
    )..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _controller.value.isInitialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : Center(child: CircularProgressIndicator()),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

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

2. 使用 better_player 插件（推荐，功能更全）

优势：支持字幕、画质切换、播放速度调整等高级功能。

步骤：

  1. 添加依赖：
    dependencies:
  better_player: ^0.0.83
  2. 实现代码：
    import 'package:better_player/better_player.dart';

class BetterPlayerExample extends StatefulWidget {
  @override
  _BetterPlayerExampleState createState() => _BetterPlayerExampleState();
}

class _BetterPlayerExampleState extends State<BetterPlayerExample> {
  late BetterPlayerController _betterPlayerController;

  @override
  void initState() {
    super.initState();
    BetterPlayerConfiguration config = BetterPlayerConfiguration(
      aspectRatio: 16 / 9,
      fit: BoxFit.contain,
    );
    BetterPlayerDataSource dataSource = BetterPlayerDataSource(
      BetterPlayerDataSourceType.network,
      'https://example.com/your-video.m3u8',
    );
    _betterPlayerController = BetterPlayerController(config);
    _betterPlayerController.setupDataSource(dataSource);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BetterPlayer(controller: _betterPlayerController),
    );
  }

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

注意事项：

  1. 网络权限：在 android/app/src/main/AndroidManifest.xml 中添加：
    <uses-permission android:name="android.permission.INTERNET"/>
  2. iOS配置：对于 iOS，在 ios/Runner/Info.plist 中添加：
    <key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
  3. HTTPS要求：iOS 默认要求 HTTPS，若使用 HTTP 需额外配置。

常见问题：

  • 若播放失败，检查 M3U8 链接是否有效或是否需要 DRM 解密。
  • 使用 better_player 可处理更多复杂场景（如加密流）。

选择方案时，若需基础功能用 video_player，需要高级功能用 better_player。

回到顶部