Flutter视频控制插件 universal_video_controls 的使用

universal_video_controls 是一个为Flutter应用提供通用视频控制功能的插件。它支持多种视频播放器后端，只要这些后端实现了 AbstractPlayer 接口。下面是如何安装和使用这个插件的详细指南。

概述

universal_video_controls 插件是基于 media_kit 控件开发的，并进行了泛化处理，使其能够与任何符合要求的视频播放器后端兼容。这使得开发者可以轻松地为他们的应用添加一致且功能丰富的视频控件。

截图展示

桌面端	移动端

示例代码

完整的示例代码可以在以下链接中找到：

• Universal Video Controls Examples
• Example Demo

开始使用

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  universal_video_controls: ^1.0.10
  universal_video_controls_video_player: ^1.0.1
  video_player: ^2.2.5

然后运行 flutter pub get 来安装这些包。

使用

要使用 universal_video_controls 包，你需要将其与实现了 AbstractPlayer 接口的视频播放器后端集成。以下是与 video_player 包结合使用的最小示例：

示例：单个播放器单个视频

import 'package:flutter/material.dart';
import 'package:universal_video_controls/universal_video_controls.dart';
import 'package:universal_video_controls_video_player/universal_video_controls_video_player.dart';
import 'package:video_player/video_player.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SinglePlayerSingleVideoScreen(),
    );
  }
}

class SinglePlayerSingleVideoScreen extends StatefulWidget {
  @override
  State<SinglePlayerSingleVideoScreen> createState() => _SinglePlayerSingleVideoScreenState();
}

class _SinglePlayerSingleVideoScreenState extends State<SinglePlayerSingleVideoScreen> {
  late VideoPlayerController _controller;
  bool _isInitialized = false;

  @override
  void initState() {
    super.initState();
    _initializeVideoPlayer('https://www.example.com/video.mp4');
  }

  void _initializeVideoPlayer(String source) async {
    _controller = VideoPlayerController.network(source);
    await _controller.initialize();
    setState(() {
      _isInitialized = true;
    });
    _controller.play();
    _controller.addListener(() {
      if (_controller.value.hasError) {
        debugPrint(_controller.value.errorDescription);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Video Player'),
      ),
      body: Center(
        child: _isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoControls(
                  player: VideoPlayerControlsWrapper(_controller),
                ),
              )
            : const CircularProgressIndicator(),
      ),
    );
  }
}

选择现有的视频控件

你可以通过修改 controls 参数来选择不同的控件样式。例如，使用 Material 风格或 Cupertino 风格的控件：

Scaffold(
  body: VideoControls(
    controller: controller,
    controls: MaterialVideoControls,
  ),
);

Scaffold(
  body: VideoControls(
    controller: controller,
    controls: CupertinoVideoControls,
  ),
);

构建自定义视频控件

你也可以传递一个自定义的构建函数作为 controls 参数：

Scaffold(
  body: VideoControls(
    controller: controller,
    controls: (state) {
      return Center(
        child: IconButton(
          onPressed: () {
            state.widget.controller.player.playOrPause();
          },
          icon: StreamBuilder(
            stream: state.widget.controller.player.stream.playing,
            builder: (context, playing) => Icon(
              playing.data == true ? Icons.pause : Icons.play_arrow,
            ),
          ),
        ),
      );
    },
  ),
);

使用和修改视频控件

你可以根据平台选择适应性的控件，如 AdaptiveVideoControls，并进行主题定制。

MaterialVideoControlsTheme(
  normal: MaterialVideoControlsThemeData(
    buttonBarButtonSize: 24.0,
    buttonBarButtonColor: Colors.white,
    topButtonBar: [
      const Spacer(),
      MaterialDesktopCustomButton(
        onPressed: () {
          debugPrint('Custom "Settings" button pressed.');
        },
        icon: const Icon(Icons.settings),
      ),
    ],
  ),
  fullscreen: const MaterialVideoControlsThemeData(
    displaySeekBar: false,
  ),
  child: Scaffold(
    body: VideoControls(
      controller: controller,
    ),
  ),
);