Flutter自定义视频播放插件flick_video_player_custom的使用

基于 Flick Video Player

Based on Flick Video Player

Flick Video Player Custom

Flick Video Player Custom 是一个为 Flutter 设计的视频播放器。 video_player 插件提供了低级别的视频播放访问。Flick Player 在底层封装了 video_player，并为开发者提供了创建自己的用户界面和功能的基础架构。

特性

• 点击视频时显示覆盖层
• 更改视频播放速度
• 更多自定义菜单选项
• 编辑滑动条界面
• 编辑全屏模式

移动端演示

视频比例 16:9

视频比例 9:16

设置表单

更多UI控制器（视频下方的暗色覆盖）

安装

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

dependencies:
  flick_video_player_custom: <latest_version>
  video_player: <latest_version>

如何使用

创建一个 FlickManager 并将其传递给 FlickVideoPlayer，确保在使用后释放 FlickManager。

import 'package:flutter/material.dart';
import 'package:flick_video_player_custom/flick_video_player.dart';
import 'package:video_player/video_player.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FlickManager flickManager1;
  late FlickManager flickManager2;

  [@override](/user/override)
  void initState() {
    super.initState();
    flickManager1 = FlickManager(
      videoPlayerController: VideoPlayerController.network(
        "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      ),
      additionalOptions: [
        OptionModel(icon: Icons.hd, onPressFeature: () {}, name: 'Quality')
      ],
    );

    flickManager2 = FlickManager(
      videoPlayerController: VideoPlayerController.network(
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
      ),
    );
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlickVideoPlayer(
                flickManager: flickManager1,
              ),
              FlickVideoPlayer(
                flickManager: flickManager2,
                flickVideoWithControls: const FlickVideoWithControls(
                  videoFit: BoxFit.fitWidth,
                  controls: FlickPortraitControls(),
                ),
                flickVideoWithControlsFullscreen: const FlickVideoWithControls(
                  controls: FlickLandscapeControls(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

示例代码

import 'package:flutter/material.dart';
import 'package:flick_video_player_custom/flick_video_player.dart';
import 'package:video_player/video_player.dart';

import 'change_stream_page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flick video player custom'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FlickManager flickManager1;
  late FlickManager flickManager2;

  [@override](/user/override)
  void initState() {
    super.initState();
    flickManager1 = FlickManager(
      videoPlayerController: VideoPlayerController.network(
        "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      ),
      additionalOptions: [
        OptionModel(
          icon: Icons.hd,
          onPressFeature: _onPressQuality,
          name: 'Quality',
        ),
      ],
    );

    flickManager2 = FlickManager(
      videoPlayerController: VideoPlayerController.network(
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
      ),
    );
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlickVideoPlayer(flickManager: flickManager1),
              // FlickVideoPlayer(
              //   flickManager: flickManager2,
              //   flickVideoWithControls: const FlickVideoWithControls(
              //     videoFit: BoxFit.fitWidth,
              //     controls: FlickPortraitControls(),
              //   ),
              //   flickVideoWithControlsFullscreen: const FlickVideoWithControls(
              //     controls: FlickLandscapeControls(),
              //   ),
              // ),
            ],
          ),
        ),
      ),
    );
  }

  void _onPressQuality() async {
    Navigator.pop(context);
    Duration currentPosition = await flickManager1
            .flickVideoManager?.videoPlayerController?.position ??
        const Duration(milliseconds: 0);
    VideoPlayerController videoPlayerController = VideoPlayerController.network(
      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
    );

    flickManager1.handleChangeVideo(
      videoPlayerController,
      videoChangeDuration: currentPosition,
      isKeepValueVideo: true,
    );

    flickManager1.flickControlManager?.togglePlay();
  }
}