Flutter视频播放器插件apivideo_player的使用

目录

• 项目描述
• 开始使用
  • 安装
• 文档
  • 实例化
    • 1. ApiVideoPlayerController
    • 2. ApiVideoPlayer
  • 方法
  • 属性
  • 事件监听器
    • 添加新的事件监听器 方法1
    • 添加新的事件监听器 方法2
    • 移除事件监听器
• 示例应用
• 依赖
• 常见问题

项目描述

api.video 是为产品构建者提供的视频基础设施。它提供了闪电般快速的视频API，用于集成、扩展和管理应用程序中的按需和低延迟直播功能。

开始使用

安装

在项目的根目录下运行以下命令以安装 apivideo_player 插件：

flutter pub add apivideo_player

文档

实例化

1. ApiVideoPlayerController

要使用视频播放器，必须先实例化一个新的控制器。ApiVideoPlayerController 的参数如下：

实例化并初始化控制器：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'), // `VIDEO_ID` 是视频ID或直播流ID
  // 对于私有视频：VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

2. ApiVideoPlayer

这是一个显示视频及其控件的小部件。ApiVideoPlayer 构造函数接受以下参数：

使用控制器创建 ApiVideoPlayer 小部件：

Widget build(BuildContext context) {
  return ApiVideoPlayer(
    controller: controller,
  );
}

方法

一旦 ApiVideoPlayerController 实例化后，可以使用其方法控制播放器：

示例：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // 对于私有视频：VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

controller.play(); // 播放视频

属性

一旦 ApiVideoPlayerController 实例化后，可以访问视频播放器的属性：

示例：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // 对于私有视频：VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

final bool isMuted = await controller.isMuted;

事件监听器

添加新的事件监听器 方法1

实例化 ApiVideoPlayerController 时绑定回调：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // 对于私有视频：VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
  onPlay: () => print('PLAY'),
  onPause: () => print('PAUSE'),
);

添加新的事件监听器 方法2

实例化后绑定回调：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  // 对于私有视频：VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
);

await controller.initialize();

final ApiVideoPlayerControllerEventsListener eventsListener =
ApiVideoPlayerControllerEventsListener(
  onPlay: () => print('PLAY'),
);

controller.addListener(eventsListener);

移除事件监听器

移除事件监听器：

controller.removeListener(eventsListener);

示例应用

完整的示例应用代码如下：

import 'package:apivideo_player/apivideo_player.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ApiVideoPlayerController _controller = ApiVideoPlayerController(
    videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
    // 对于私有视频：VideoOptions(videoId: "YOUR_VIDEO_ID", token: "YOUR_PRIVATE_TOKEN")
    onPlay: () => print('PLAY'),
  );
  String _duration = 'Get duration';

  @override
  void initState() {
    super.initState();
    _controller.initialize();
    _controller.addListener(
      ApiVideoPlayerControllerEventsListener(
        onPause: () => print('PAUSE'),
      ),
    );
  }

  void _getDuration() async {
    final Duration duration = await _controller.duration;
    setState(() {
      _duration = 'Duration: $duration';
    });
  }

  void _muteVideo() {
    _controller.setIsMuted(true);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          body: Center(
            child: Column(
              children: <Widget>[
                SizedBox(
                  width: 400.0,
                  height: 300.0,
                  child: ApiVideoPlayer(
                    controller: _controller,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.volume_off),
                  onPressed: _muteVideo,
                ),
                TextButton(
                  onPressed: _getDuration,
                  child: Text(
                    _duration,
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

依赖

我们使用了外部库：

常见问题

如果有任何问题，请在 社区 中提问或使用 issues。