Flutter视频播放插件igplayer的使用

Flutter视频播放插件igplayer的使用

警告： 该库正处于测试阶段，可用于实验性项目，但不适合专业环境。欢迎随时提供反馈。

我的领英地址：https://www.linkedin.com/in/zafercetin0/

IgPlayer 是一个可以在 Android 和 iOS 平台上支持后台播放和画中画模式的视频播放器。它只是一个视频播放器，并不包含任何视频播放器的设计。因此，你需要自行设计整个播放器界面。

IgPlayer 在 Android 端使用 ExoPlayer，在 iOS 端使用 AVPlayer，从而能够访问流行原生播放器的所有功能。

示例

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个 IgPlayerController 实例
  final igPlayerController = IgPlayerController();

  // 设置视频 URL
  var videoUrl =
      "https://video-previews.elements.envatousercontent.com/files/c499c34a-2618-4900-be84-b04f9e8cf443/video_preview_h264.mp4";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: IgVideoPlayer(
          // 视频 URL
          videoUrl: videoUrl,
          // 控制器
          igPlayerController: igPlayerController,
          // 初始化值
          initialValues: (p0) {},
          // 自动播放
          autoPlay: true,
        ),
      ),
    );
  }
}

更多关于Flutter视频播放插件igplayer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter视频播放插件igplayer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


igPlayer 是一个基于 Flutter 的视频播放插件，支持多种视频格式和播放控制功能。它提供了简单易用的 API，可以帮助开发者在 Flutter 应用中快速集成视频播放功能。以下是 igPlayer 的基本使用方法和步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 igPlayer 依赖：

dependencies:
  flutter:
    sdk: flutter
  igplayer: ^0.1.0  # 请根据最新版本号进行替换

然后运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用 igPlayer 的 Dart 文件中导入包：

import 'package:igplayer/igplayer.dart';

3. 使用 IgPlayer 组件

igPlayer 提供了一个 IgPlayer 组件，你可以直接在 Widget 树中使用它来播放视频。

class VideoPlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('igPlayer 示例'),
      ),
      body: Center(
        child: IgPlayer(
          url: 'https://www.example.com/sample.mp4', // 视频的 URL
          autoPlay: true, // 是否自动播放
          looping: false, // 是否循环播放
          showControls: true, // 是否显示控制条
          onPlay: () {
            print('视频开始播放');
          },
          onPause: () {
            print('视频暂停');
          },
          onEnd: () {
            print('视频播放结束');
          },
        ),
      ),
    );
  }
}

4. 控制视频播放

igPlayer 还提供了播放、暂停、停止等控制方法。你可以通过 IgPlayerController 来操作视频播放器。

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

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

  @override
  void initState() {
    super.initState();
    _controller = IgPlayerController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('igPlayer 示例'),
      ),
      body: Column(
        children: [
          IgPlayer(
            url: 'https://www.example.com/sample.mp4',
            controller: _controller,
            autoPlay: true,
            looping: false,
            showControls: true,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.play_arrow),
                onPressed: () {
                  _controller.play();
                },
              ),
              IconButton(
                icon: Icon(Icons.pause),
                onPressed: () {
                  _controller.pause();
                },
              ),
              IconButton(
                icon: Icon(Icons.stop),
                onPressed: () {
                  _controller.stop();
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

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

5. 处理播放状态

你可以通过 IgPlayerController 来监听播放状态的变化，例如播放进度、缓冲进度等。

_controller.onPositionChanged.listen((Duration position) {
  print('当前播放位置: $position');
});

_controller.onBuffering.listen((bool buffering) {
  if (buffering) {
    print('正在缓冲...');
  } else {
    print('缓冲完成');
  }
});

6. 自定义控制界面

igPlayer 允许你自定义控制界面。你可以通过 IgPlayerController 来实现自定义的播放控制逻辑。

IgPlayer(
  url: 'https://www.example.com/sample.mp4',
  controller: _controller,
  autoPlay: true,
  looping: false,
  showControls: false, // 隐藏默认控制条
  customControls: MyCustomControls(controller: _controller),
);

MyCustomControls 是你自定义的控制界面组件。

7. 处理全屏播放

igPlayer 支持全屏播放功能。你可以通过 IgPlayerController 来控制全屏模式。

_controller.enterFullScreen(); // 进入全屏模式
_controller.exitFullScreen(); // 退出全屏模式

8. 处理视频加载错误

你可以通过 IgPlayerController 来处理视频加载错误。

_controller.onError.listen((String error) {
  print('视频加载错误: $error');
});
回到顶部