Flick视频播放器

Flick Video Player是Flutter的一个视频播放器。 video_player 插件为视频播放提供底层访问。Flick Player在底层封装了video_player，并为开发者提供了创建自己的UI和功能的碱基架构。

功能

  • 双击以跳转视频。
  • 点击视频可播放/暂停、静音/取消静音，或对视频执行任何操作。
  • 自动隐藏控件。
  • 自定义动画。
  • 常规和全屏的自定义控件。
  • 自动播放视频列表。
  • 更改播放速度。
  • Web平台的键盘快捷键。

演示移动端
默认播放器 视频 代码 动画播放器 视频 代码 信息流播放器 视频 代码
方向播放器 视频 代码 横屏播放器 视频 代码

演示Web端
Web播放器 视频 代码

示例

请在example/文件夹中运行该应用开始播放！

请参考这篇文章 文章 来理解底层是如何工作的。

安装

将以下依赖项添加到您Flutter项目的pubspec.yaml文件中。

    flick_video_player: <latest_version>
    video_player: <latest_version>

如何使用

创建一个FlickManager并将管理器传递给FlickVideoPlayer，确保在使用后dispose FlickManager。

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

class SamplePlayer extends StatefulWidget {
  SamplePlayer({Key key}) : super(key: key);

  @override
  _SamplePlayerState createState() => _SamplePlayerState();
}

class _SamplePlayerState extends State<SamplePlayer> {
  FlickManager flickManager;
  @override
  void initState() {
    super.initState();
    flickManager = FlickManager(
      videoPlayerController:
          VideoPlayerController.network("url"),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlickVideoPlayer(
        flickManager: flickManager
      ),
    );
  }
}

公共类摘要

类 摘要
FlickVideoPlayer 主入口点，接收一个FlickManager和一个名为flickVideoWithControls的widget作为参数之一。
FlickManager 通过不同的管理器来管理所有与视频相关的操作。FlickVideoManager负责维护视频的生命周期、更改视频和监听视频的状态变化。FlickControlManager负责在视频上执行操作，如播放、静音、跳转、切换全屏等。FlickDisplayManager负责在播放器状态改变时显示/隐藏控件。
FlickVideoWithControls 一个辅助widget，用于渲染video_player，使用FlickNativeVideoPlayer和自定义播放器控件。要创建带有自定义控件的视频播放器，您必须使用此widget，并将其作为flickVideoWithControls参数传递给FlickVideoPlayer。添加了closedCaptionTextStyle参数以样式化视频字幕。
FlickPlayToggle 一个UI辅助widget，用于为视频播放器创建播放/暂停/重播按钮。您可以传递自定义的播放、暂停和重播widget，或更改默认图标的设置。
FlickSoundToggle 一个UI辅助widget，用于为视频播放器创建静音/取消静音按钮。您可以传递自定义的静音和取消静音widget，或更改默认图标的设置。
FlickFullscreenToggle 一个UI辅助widget，用于为视频播放器创建全屏/退出全屏按钮。您可以传递自定义的全屏和退出全屏widget，或更改默认图标的设置。
FlickVideoProgressBar 一个UI辅助widget，用于为您的视频播放器创建进度条。它接受FlickProgressBarSettings作为参数之一，以便用户可以创建自定义进度条。这高度可定制，用户几乎可以更改进度条的所有属性，如height、handleRadius，提供自定义Color或自定义Paint。
FlickTotalDuration 一个文本UI辅助widget，用于显示视频的总时长。
FlickCurrentPosition 一个文本UI辅助widget，用于显示视频的当前播放位置。
FlickLeftDuration 一个文本UI辅助widget，用于显示视频剩余时长。
FlickSetPlayBack 一个文本UI辅助widget，用于更改视频的播放速度。
FlickVideoBuffer 一个UI辅助widget，用于在视频缓冲时显示CircularProgressIndicator或您的自定义widget。
FlickAutoPlayCircularProgress 一个UI辅助widget，用于显示带有计时器的圆形进度条，以切换到下一个视频。
FlickSeekVideoAction 一个操作辅助widget，用于在屏幕上双击时按自定义Duration向前/向后跳转视频。接受child作为参数之一，用于嵌套其他操作或widget。
FlickShowControlsAction 一个操作辅助widget，用于在屏幕上点击时在显示/隐藏控件之间切换。接受child作为参数之一，用于嵌套其他操作或widget。
FlickTogglePlayAction 一个操作辅助widget，用于在屏幕上点击时在播放/暂停之间切换。接受child作为参数之一，用于嵌套其他操作或widget。
FlickToggleSoundAction 一个操作辅助widget，用于在屏幕上点击时在静音/取消静音之间切换。接受child作为参数之一，用于嵌套其他操作或widget。
FlickSubtitleToggle 一个操作辅助widget，用于在屏幕上点击时在显示字幕/不显示字幕之间切换。接受child作为参数之一，用于嵌套其他操作或widget。

要播放视频列表，您需要创建自定义的DataManager，您可以在/example文件夹中找到一些实现。

UI辅助和操作辅助是与FlickDisplayManager、FlickControlManager和FlickVideoManager交互的widget，您可以轻松创建自己的自定义widget/操作，Provider包用于状态管理。

Web

Web指南：由于我们在底层使用了video_player_web，请在开始之前遵循video_player_web的文档。

默认快捷键

按键 行为
f 切换全屏
m 切换静音
ArrowRight 向前跳转
ArrowLeft 向后跳转
(空格键) 切换播放
ArrowUp 增大音量
ArrowDown 减小音量
  • 您可以将webKeyDownHandler参数传递给FlickVideoPlayer并自行管理键盘快捷键。

注意事项

  • 退出全屏的Esc快捷键正在开发中。

第三方内容来源

视频

图片

GitHub

查看 Github