Flutter视频播放插件apivideo_player

Flutter视频播放插件apivideo_player_android21的使用

简介

apivideo_player_android21 是一个用于在 Flutter 应用中集成 api.video 视频播放功能的插件。它支持在 iOS、Android 和 Web 平台上播放视频。

项目描述

通过 apivideo_player_android21 插件，您可以轻松地将 api.video 的视频播放功能集成到您的 Flutter 应用中，支持 iOS、Android 和 Web 平台。

开始使用

安装

在项目的根目录下运行以下命令以添加插件：

flutter pub add apivideo_player_android21

Web 使用

如果您希望在 Web 上使用该插件，请确保在 web/index.html 文件中添加 api.video 的脚本：

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- 添加以下行 -->
    <script src="https://unpkg.com/@api.video/player-sdk" defer></script>
  </head>

  <body>
    ...
  </body>
</html>

文档

实例化

1. 创建 `ApiVideoPlayerController`

ApiVideoPlayerController 是控制视频播放的核心类。以下是其参数及其说明：

参数	是否必填	类型	描述
`videoOptions`	是	`VideoOptions`	要播放的视频选项
`autoplay`	否（默认值为 `false`）	`bool`	是否自动播放视频
`onReady`	否	`VoidCallback`	视频准备好的回调函数
`onPlay`	否	`VoidCallback`	视频开始播放时的回调函数
`onPause`	否	`VoidCallback`	视频暂停时的回调函数
`onEnd`	否	`VoidCallback`	视频播放结束时的回调函数
`onError`	否	`Function(Object)`	播放出错时的回调函数

示例代码：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
);

await controller.initialize();

2. 创建 `ApiVideoPlayer`

ApiVideoPlayer 是一个用于显示视频及其控件的小部件。以下是其参数及其说明：

参数	是否必填	类型	描述
`controller`	是	`ApiVideoPlayerController`	控制视频播放的小部件
`hideControls`	否（默认值为 `false`）	`bool`	是否隐藏控件
`theme`	否（默认值为 `PlayerTheme`）	`PlayerTheme`	自定义播放器主题

示例代码：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
);

await controller.initialize();

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

方法

ApiVideoPlayerController 提供了许多方法来控制视频播放：

方法	描述
`play()`	播放视频
`pause()`	暂停视频
`seek(Duration offset)`	将视频进度向前或向后移动指定的时间
`setVolume(double volume)`	设置音量，范围为 0 到 1（0 表示静音，1 表示最大音量）
`setIsMuted(bool isMuted)`	静音或取消静音
`setAutoplay(bool autoplay)`	设置视频是否自动播放
`setIsLooping(bool isLooping)`	设置视频是否循环播放
`setCurrentTime(Duration currentTime)`	设置当前播放时间
`setVideoOptions(VideoOptions videoOptions)`	设置视频选项

示例代码：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
);

await controller.initialize();

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

属性

ApiVideoPlayerController 提供了许多属性来获取视频播放状态：

属性	类型	描述
`isCreated`	`Future<bool>`	检查播放器是否已创建
`isPlaying`	`Future<bool>`	检查视频是否正在播放
`videoOptions`	`Future<VideoOptions>`	获取当前视频选项
`currentTime`	`Future<Duration>`	获取当前播放时间
`duration`	`Future<Duration>`	获取视频总时长
`autoplay`	`Future<bool>`	检查视频是否自动播放
`isMuted`	`Future<bool>`	检查视频是否静音
`isLooping`	`Future<bool>`	检查视频是否循环播放
`volume`	`Future<double>`	获取当前音量
`videoSize`	`Future<Size?>`	获取当前视频尺寸

示例代码：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
);

await controller.initialize();

final bool isMuted = await controller.isMuted;

事件监听

添加事件监听：方法 1

在实例化 ApiVideoPlayerController 时，可以绑定事件回调：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
  onPlay: () => print('PLAY'),
  onPause: () => print('PAUSE'),
);

添加事件监听：方法 2

在控制器初始化后，可以通过 addEventsListener 方法绑定事件监听器：

final ApiVideoPlayerController controller = ApiVideoPlayerController(
  videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
);

await controller.initialize();

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

controller.addEventsListener(eventsListener);

移除事件监听

要移除事件监听器，可以调用 removeEventsListener 方法：

controller.removeEventsListener(eventsListener);

依赖项

我们使用了以下外部库：

插件	README
ExoPlayer	README.md

示例应用

以下是一个完整的示例应用，展示了如何使用 apivideo_player_android21 插件：

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

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

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

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

class _MyAppState extends State<MyApp> {
  final ApiVideoPlayerController _controller = ApiVideoPlayerController(
    videoOptions: VideoOptions(videoId: 'VIDEO_ID'),
    onPlay: () => print('PLAY'),
  );
  String _duration = 'Get duration';

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller.initialize();
    _controller.addEventsListener(
      ApiVideoPlayerEventsListener(
        onPause: () => print('PAUSE'),
      ),
    );
  }

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

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

  [@override](/user/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,
                  ),
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

sinazl 1楼•15 天前

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

apivideo_player_android21 是一个用于在 Flutter 应用中播放视频的插件，它基于 Android 21+ 的 API。这个插件可以帮助你在 Flutter 应用中轻松地集成视频播放功能。以下是如何使用 apivideo_player_android21 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 apivideo_player_android21 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  apivideo_player_android21: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:apivideo_player_android21/apivideo_player_android21.dart';

3. 初始化视频播放器

你可以使用 ApiVideoPlayerController 来初始化和控制视频播放器。

class VideoPlayerScreen extends StatefulWidget {
  [@override](/user/override)
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = ApiVideoPlayerController(
      videoId: 'YOUR_VIDEO_ID',  // 替换为你的视频ID
      apiKey: 'YOUR_API_KEY',    // 替换为你的API密钥
    )..initialize().then((_) {
        setState(() {});
      });
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: ApiVideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

Flutter视频播放插件apivideo_player_android21的使用