awsome_video_player 1.0.6

写在前面 #

我们往往写项目都是着急上手,总想着先写后面有时间了再(说)来(的)优(好)化(听),这样写出来的代码往往都是跟业务系统耦合在一块要么就是质量不高,下次使用的时候就想重构,有人说项目急没办法(曾经我也这么说过),但是一个好的编程习惯真的可以做到事半功倍。既然是一种习惯,那么肯定是可以改的,首先我要先习惯利用思维导图来明确明白自己要什么,有什么功能,开始设计接口以及参数,最后才是分优先级然后根据优先级来执行下一步该做什么,这样可以很大高效的避免踩坑,避免因为设计不合理需要重构就麻烦了。闲话不多说下面进入正题。

那么什么叫高度自由的播放器呢?我是这么认为的:首先尽可能的开放权限来更改配置,其次模块化设计,同时还需要跟业务代码解耦,光有这些还不算够,最后我们需要让视频播放器实现自定义拓展,也就是说现有播放器功能满足不了自己需求的时候,开发者可以自己动手,例如视频的字幕弹幕视频顶部控制栏等。

一张效果图

快速通道 #

高自由度的播放器应该具备哪些功能? #

  • 1.所有图标均可自定义
  • 2.播放器自定义配置
    • 视频开始播放的起始位置
    • 是否自动播放
    • 是否循环播放
    • 视频比例
    • 进度条是否允许拖拽
    • 视频快进/快退的单位秒数
  • 3.自定义拓展子元素
    • 字幕(也可以使用内置字幕)
    • 弹幕
    • 其他元素(例如:广告覆盖;自定义视频顶部返回按钮;快进或快退等操作的渐入渐出的提示等等)
  • 4.自定义播放器样式
    • 播放按钮是否显示(视频暂停时视图中央的播放按钮)
    • 自定义播放按钮(视频暂停时视图中央的播放按钮)
    • 顶部控制栏自定义
      • 显示或隐藏
      • 自定义高度
      • 自定义边距
      • 自定义背景颜色
      • 自定义返回按钮
      • 拓展中部元素(标题)
      • 拓展右侧控制元素(更多操作)
    • 控制栏自定义配置
      • 自定义顺序(通过数组来控制元素:线形进度条、矩形进度条等)
      • 自定义元素(通过数组来控制顺序)
      • 自定义背景颜色
      • 自定义图标(播放、暂停、快进、快退、全屏、取消全屏)
      • 进度条样式自由配置(背景颜色、缓存区颜色、进度条颜色、拖拽按钮颜色、拖拽按钮颜色等)
      • 音量控制元素(尚未完成)
      • 内置弹幕(尚未完成,尚可自定义)
      • 控制栏拓展(尚未完成)
    • 内置字幕自定义配置(或者通过自定义拓展来自己重写字幕)
      • 设置主字幕或辅字幕的字体大小
      • 设置主字幕或辅字幕的字体颜色
  • 5.手势支持
    • 单击(菜单栏显示或隐藏)
    • 双击(暂停或播放)
    • 滑动快进或快退
    • 滑动调整视频亮度 (左侧区域)
    • 滑动调整音量大小(右侧区域)
  • 6.横竖屏切换
  • 7.常亮避免锁屏

一图胜千言 #

通过上图我们可以看一下播放器都有哪些属性呢?

播放器属性:

属性类型描述
dataSourceString视频URL或媒体文件的路径
childrenList自定义拓展的子元素,需要使用 WidgetAlign(字幕、弹幕、视频顶部控制栏等)
oninitVideoCallback初始化完成回调
onplayVideoCallback视频开始播放的回调
onpauseVideoCallback视频暂停播放回调
ontimeupdateVideoCallback视频播放进度回调(通过返回的value进行字幕匹配)
onendVideoCallback视频播放结束回调
onvolumeVideoCallback播放声音大小变化回调
onbrightnessVideoCallback屏幕亮度变化回调
onpopVideoCallback顶部控制栏返回按钮点击回调
onnetworkVideoCallback网络变化回调
onfullscreenVideoCallback视频是否全屏回调
playOptionsVideoPlayOptions视频播放自定义配置(详情见下方的Useage
videoStyleVideoStyle视频播放器自定义样式(详情见下方的Useage

播放器自定义配置 (VideoPlayOptions):

属性类型描述
startPositionDuration开始播放节点,例如:Duration(seconds: 0))
loopbool是否循环播放
seekSecondsnum设置视频快进/快退单位秒数,默认为15s
autoplaybool是否自动播放
aspectRationum视频播放比例,例如:16/9 或者 4/3
allowScrubbingbool是否运行进度条拖拽

播放器自定义样式 (VideoStyle):

属性类型描述
playIconWidget视频暂停播放时中央显示的图标,showPlayIcon为false时,该属性设置无效。
showPlayIconbool暂停时是否显示播放按钮
videoTopBarStyleVideoTopBarStyle视频顶部自定义样式(详情见下方的Useage
videoControlBarStyleVideoControlBarStyle控制栏自定义样式(详情见下方的Useage
videoSubtitlesStyleVideoSubtitles字幕自定义样式(详情见下方的Useage

自定义顶部控制栏 (VideoTopBarStyle):

属性类型描述
showbool是否显示控制栏
barBackgroundColorColor控制栏背景颜色,默认为Color.fromRGBO(0, 0, 0, 0.5)
heightdouble自定义控制栏高度
paddingEdgeInsets自定义边距
popIconWidget自定义返回按钮
contentsList拓展控制栏中部元素(宽度自适应: Row中的 Expanded
actionsList拓展控制栏右侧控制元素
customBarWidget重写控制栏(如果设置了customBar, 除show属性意外上方属性均不生效),仅支持AlignPositioned

自定义控制栏样式 (VideoControlBarStyle):

属性类型描述
heightdouble控制栏高度,默认为30
paddingEdgeInsets控制栏内边距,默认为EdgeInsets.symmetric(vertical: 8, horizontal: 10)
progressStyleVideoProgressStyle自定义控制拦进度条样式
barBackgroundColorColor控制栏背景颜色,默认为Color.fromRGBO(0, 0, 0, 0.5)
timePaddingEdgeInsets视频时间的内边距,默认为EdgeInsets.symmetric(horizontal: 5)
timeFontSizedouble视频时间的字体大小,默认为8
timeFontColorColor视频时间的颜色,默认为Color.fromRGBO(255, 255, 255, 1)
playIconWidget控制栏播放图标(下图3详细说明)
pauseIconWidget控制栏暂停图标(下图3详细说明)
rewindIconWidget控制栏快退图标(下图3详细说明)
forwardIconWidget控制栏快进图标(下图3详细说明)
fullscreenIconWidget控制栏全屏图标(下图3详细说明)
fullscreenExitIconWidget控制栏取消全屏图标(下图3详细说明)
itemListList控制栏自定义功能(下图4详细说明),默认为["rewind", "play", "forward", "position-time", "progress", "duration-time", "fullscreen"]。如果我们需要调整控制栏显示的顺序,仅需要调整 list 中字符串的顺序,如果需要删减,直接从 list 中移除改字符串即可,例如移除快进和快退,则讲 list 设置为 ["play", "progress","position-time", "progress", "duration-time", "fullscreen"] 即可。后面会陆续开放自定义元素,也就是你把你的元素加入到 list 中。

自定义进度条样式 (VideoProgressStyle) :

属性类型描述
paddingEdgeInsets进度条边距(itemList中包含progress有效)
heightdouble进度条高度(itemList中包含progress有效)
dragHeightdouble进度条拖拽按钮高度(itemList中包含progress有效)
progressRadiusdouble进度条圆角(itemList中包含progress有效)
playedColorColor已播放的进度条颜色(下图2详细说明)
bufferedColorColor已缓冲的进度条颜色(下图2详细说明)
backgroundColorColor进度条背景颜色(下图2详细说明)
dragBarColorColor进度条拖拽按钮演示(itemList中包含progress有效)

自定义控制栏功能 (itemList) :

属性类型描述
rewindString快退功能,对应VideoControlBarStylerewindIcon图标
playString播放/暂停功能,对应VideoControlBarStyleplayIcon pauseIcon图标
forwardString快进功能,对应VideoControlBarStyleforwardIcon图标
progressString线条形进度条(与‘basic-progress’二选一),由VideoControlBarStyleprogressStyle控制样式
basic-progressString矩形进度条(与‘progress’二选一),由VideoControlBarStyleprogressStyle控制样式
timeString时间格式:当前时间/视频总时长(与position-timeduration-time二选一),由VideoControlBarStyletimePadding timeFontSize timeFontColor控制样式
position-timeString当前播放时间,样式控制与time相同
duration-timeString视频总时长,样式控制与time相同
fullscreenString全屏/小屏功能,对应VideoControlBarStylefullscreenIcon fullscreenExitIcon图标

图1

控制栏颜色自定义

图标自定义

控制栏进度条自定义元素

如何使用? #

Install & Set up

  1. 添加依赖,打开根目录的pubspec.yaml文件,在dependencies:下面添加以下代码

    awsome_video_player: #latest
    
  2. 安装依赖(如果已经自动安装请忽略)

    cd 项目目录
    flutter packages get
    
  3. 在页面中引入库

    import 'package:awsome_video_player/awsome_video_player.dart';
    

Useage #

这是一个完整的

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  String mainSubtitles = "主字幕";
  String subSubtitles = "辅字幕";

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Awsome video player'),
        ),
        body: Center(
          child: AwsomeVideoPlayer(
            "https://www.runoob.com/try/demo_source/movie.mp4",
            /// 视频播放配置
            playOptions: VideoPlayOptions(
              seekSeconds: 30,
              aspectRatio: 16 / 9,
              loop: true,
              autoplay: true,
              allowScrubbing: true,
              startPosition: Duration(seconds: 0)),
            /// 自定义视频样式
            videoStyle: VideoStyle(
            	/// 自定义视频暂停时视频中部的播放按钮
              playIcon: Icon(
                Icons.play_circle_outline,
                size: 100,
                color: Colors.white,
              ),
              /// 暂停时是否显示视频中部播放按钮
              showPlayIcon: true,
              /// 自定义底部控制栏
              videoControlBarStyle: VideoControlBarStyle(
                /// 自定义颜色
                //barBackgroundColor: Colors.blue,
                /// 自定义进度条样式
                progressStyle: VideoProgressStyle(
                  // padding: EdgeInsets.all(0),
                  playedColor: Colors.red,
                  bufferedColor: Colors.yellow,
                  backgroundColor: Colors.green,
                  dragBarColor: Colors.white,//进度条为`progress`时有效,如果时`basic-progress`则无效
                  height: 4,
                  progressRadius: 2,//进度条为`progress`时有效,如果时`basic-progress`则无效
                  dragHeight: 5//进度条为`progress`时有效,如果时`basic-progress`则无效
                ),
                /// 更改进度栏的播放按钮
                playIcon: Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 16
                ),
                /// 更改进度栏的暂停按钮
                pauseIcon: Icon(
                  Icons.pause,
                  color: Colors.red,
                  size: 16,
                ),
                /// 更改进度栏的快退按钮
                rewindIcon: Icon(
                  Icons.replay_30,
                  size: 16,
                  color: Colors.white,
                ),
                /// 更改进度栏的快进按钮
                forwardIcon: Icon(
                  Icons.forward_30,
                  size: 16,
                  color: Colors.white,
                ),
                /// 更改进度栏的全屏按钮
                fullscreenIcon: Icon(
                  Icons.fullscreen,
                  size: 16,
                  color: Colors.white,
                ),
                /// 更改进度栏的退出全屏按钮
                fullscreenExitIcon: Icon(
                  Icons.fullscreen_exit,
                  size: 16,
                  color: Colors.red,
                ),
                /// 决定控制栏的元素以及排序,示例见上方图3
                itemList: [
                  "rewind",
                  "play",
                  "forward",
                  "position-time", //当前播放时间
                  "progress",//线形进度条
                  //"basic-progress",//矩形进度条
                  "duration-time", //视频总时长
                  // "time", //格式:当前时间/视频总时长
                  "fullscreen"
                ],
              ),
              /// 自定义字幕
              videoSubtitlesStyle: VideoSubtitles(
              	mianTitle: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 30),
                    child: Text(
                    		mainSubtitles,
                        maxLines: 2,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white, fontSize: 14)),
                  ),
                ),
                subTitle: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    padding: EdgeInsets.all(10),
                    child: Text(
                    		subSubtitles,
                        maxLines: 2,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white, fontSize: 14)),
                  ),
                ),
              ),
            ),
            /// 自定义拓展元素
            children: [
              /// 这个将会覆盖的视频内容,因为这个层级是最高级,因此手势会失效(慎用)
              /// 这个可以用来做视频广告
              // Positioned(
              //   top: 0,
              //   left: 0,
              //   bottom: 0,
              //   right: 0,
              //   child: Text("data", style: TextStyle(color: Colors.white),),
              // ),
            ],
            /// 视频初始化完成回调
            oninit: (val) {
              print("video oninit");
            },
            /// 视频播放回调
            onplay: (value) {
              print("video played");
            },
            /// 视频暂停回调
            onpause: (value) {
              print("video paused");
            },
            /// 视频播放结束回调
            onended: (value) {
              print("video ended");
            },
            /// 视频播放进度回调
            /// 可以用来匹配字幕
            ontimeupdate: (value) {
              print("timeupdate $value");
              var position = value.position.inMilliseconds / 1000;
              //根据 position 来判断当前显示的字幕
            },
            /// 声音变化回调
            onvolume: (value) {
              print("onvolume $value");
            },
            /// 亮度变化回调
            onbrightness: (value) {
              print("onbrightness $value");
            },
            /// 网络变化回调
            onnetwork: (value) {
              print("onbrightness $value");
            },
            /// 顶部控制栏点击返回按钮
            onpop: (value) {
              print("返回上一页");
            },
          ),
        ),
      ),
    );
  }
}

DEMO示例 #

1. 自定义控制栏图标 #

首先我来看一下控制栏的图标自定义(见上图2):

DEMO: main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Awsome video player'),
        ),
        body: Center(
          child: AwsomeVideoPlayer(
            "https://www.runoob.com/try/demo_source/movie.mp4",
            /// 视频播放配置
            playOptions: VideoPlayOptions(
              seekSeconds: 30,
              aspectRatio: 16 / 9,
              loop: true,
              autoplay: true,
              allowScrubbing: true,
              startPosition: Duration(seconds: 0)),
            /// 自定义视频样式 - 请注意我要划重点了
            videoStyle: VideoStyle(
              /// 自定义底部控制栏  - 这是重点了
              videoControlBarStyle: VideoControlBarStyle(
                /// 更改进度栏的播放按钮
                playIcon: Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 16
                ),
                /// 更改进度栏的暂停按钮
                pauseIcon: Icon(
                  Icons.pause,
                  color: Colors.red,
                  size: 16,
                ),
                /// 更改进度栏的快退按钮
                rewindIcon: Icon(
                  Icons.replay_30,
                  size: 16,
                  color: Colors.white,
                ),
                /// 更改进度栏的快进按钮
                forwardIcon: Icon(
                  Icons.forward_30,
                  size: 16,
                  color: Colors.white,
                ),
                /// 更改进度栏的全屏按钮
                fullscreenIcon: Icon(
                  Icons.fullscreen,
                  size: 16,
                  color: Colors.white,
                ),
                /// 更改进度栏的退出全屏按钮
                fullscreenExitIcon: Icon(
                  Icons.fullscreen_exit,
                  size: 16,
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. 自定义控制栏元素和顺序 #

我们可以根据videoStylevideoControlBarStyle来自定义控制栏的样式:调整顺序(见上方图3)只需要调整 itemList中字符串的顺序即可;控制显示的元素,将不需要暂时的元素从 itemList 中删除即可。

DEMO: main.dart

import 'package:flutter/material.dart';

import 'package:awsome_video_player/awsome_video_player.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Awsome video player'),
        ),
        body: Center(
          child: AwsomeVideoPlayer(
            "https://www.runoob.com/try/demo_source/movie.mp4",
            /// 视频播放配置
            playOptions: VideoPlayOptions(
              seekSeconds: 30,
              aspectRatio: 16 / 9,
              loop: true,
              autoplay: true,
              allowScrubbing: true,
              startPosition: Duration(seconds: 0)),
            /// 自定义视频样式 - 请注意我要划重点了
            videoStyle: VideoStyle(
              /// 自定义底部控制栏  - 这是重点了
              videoControlBarStyle: VideoControlBarStyle(
                /// 决定控制栏的元素以及排序,示例见上方图3
                itemList: [
                  "progress",// 这里将进度条前置了,因此有了图3的效果
                  "rewind",//如果需要删除快退按钮,将其注释或删除即可
                  "play",
                  "forward",
                  "time",
                  "fullscreen"
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 自定义进度条以及控制栏的背景颜色 #

同样我们还是通过videoStylevideoControlBarStyle来自定义进度条的颜色(见上方图3)。

DEMO: main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Awsome video player'),
        ),
        body: Center(
          child: AwsomeVideoPlayer(
            "https://www.runoob.com/try/demo_source/movie.mp4",
            /// 视频播放配置
            playOptions: VideoPlayOptions(
              seekSeconds: 30,
              aspectRatio: 16 / 9,
              loop: true,
              autoplay: true,
              allowScrubbing: true,
              startPosition: Duration(seconds: 0)),
            /// 自定义视频样式
            videoStyle: VideoStyle(
              /// 自定义底部控制栏
              videoControlBarStyle: VideoControlBarStyle(
                /// 自定义颜色
                barBackgroundColor: Colors.blue,//控制栏的背景颜色

                /// 自定义进度条样式
                progressStyle: VideoProgressStyle(
                  // padding: EdgeInsets.all(0),
                  playedColor: Colors.red,
                  bufferedColor: Colors.yellow,
                  backgroundColor: Colors.green,
                  dragBarColor: Colors.white,//进度条为`progress`时有效,如果时`basic-progress`则无效
                  height: 4,
                  progressRadius: 2,//进度条为`progress`时有效,如果时`basic-progress`则无效
                  dragHeight: 5//进度条为`progress`时有效,如果时`basic-progress`则无效
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4. 自定义顶部控制栏 #

通过videoStylevideoTopBarStyle来自定义顶部控制栏。

DEMO

DEMO: main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String videoUrl = "https://www.runoob.com/try/demo_source/movie.mp4";
  bool showAdvertCover = false;//是否显示广告

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Awsome video player'),
        ),
        body: Center(
          child: videoUrl != ""
              ? AwsomeVideoPlayer(
                  videoUrl,

                  /// 视频播放配置
                  playOptions: VideoPlayOptions(
                      seekSeconds: 30,
                      aspectRatio: 16 / 9,
                      loop: true,
                      autoplay: true,
                      allowScrubbing: true,
                      startPosition: Duration(seconds: 0)),

                  /// 自定义视频样式
                  videoStyle: VideoStyle(

                    /// 自定义顶部控制栏
                    videoTopBarStyle: VideoTopBarStyle(
                      show: true, //是否显示
                      height: 30,
                      padding:
                          EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                      barBackgroundColor: Color.fromRGBO(0, 0, 0, 0.5),
                      popIcon: Icon(
                        Icons.arrow_back,
                        size: 16,
                        color: Colors.white,
                      ),
                      contents: [
                        Center(
                          child: Container(
                            margin: EdgeInsets.symmetric(horizontal: 10),
                            child: Text(
                              '123',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        )
                      ], //自定义顶部控制栏中间显示区域
                      actions: [
                        GestureDetector(
                          onTap: () {
                            ///1. 可配合自定义拓展元素使用,例如广告
                            setState(() {
                              showAdvertCover = true;
                            });
                            ///
                          },
                          child: Icon(
                            Icons.more_horiz,
                            size: 16,
                            color: Colors.white,
                          ),
                        )
                      ], //自定义顶部控制栏右侧显示区域
                      /// 设置cusotmBar之后,以上属性均无效(除了`show`之外)
                      // customBar: Text("123123132")
                    ),
                  ),

                  /// 顶部控制栏点击返回按钮
                  onpop: (value) {
                    print("返回上一页");
                  },
                )
              : AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Center(
                    child: CircularProgressIndicator(strokeWidth: 2.0),
                  ),
                ),
        ),
      ),
    );
  }
}

注意事项(Q&A)

  • 视频如果需要横竖屏不能使用safeArea

  • 视频的 dataSoure不能为空,为空时使用加载视图,否则播放器会报错

    import 'package:flutter/material.dart';
    import 'package:awsome_video_player/awsome_video_player.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
    
      String videoUrl = "https://www.runoob.com/try/demo_source/movie.mp4";
    
      @override
      void initState() {
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Awsome video player'),
            ),
            body: Center(
              /// 一般videoUrl是从服务端返回,在没有返回来之前,
              /// 我们可以使用加载视图来占位
              child: videoUrl != "" ? AwsomeVideoPlayer(
                videoUrl,
                /// 视频播放配置
                playOptions: VideoPlayOptions(
                  seekSeconds: 30,
                  aspectRatio: 16 / 9,
                  loop: true,
                  autoplay: true,
                  allowScrubbing: true,
                  startPosition: Duration(seconds: 0)),
              ) : AspectRatio(
                aspectRatio: 16 / 9,
                child: Center(
                  child: CircularProgressIndicator(strokeWidth: 2.0),
                ),
              ),
            ),
          ),
        );
      }
    }
    
    
  • AwsomeVideoPlayer下面的children仅支持AlignPositioned,children的层级会高于下面,这个功能会持续更新,后面会陆续出一些针对自定义拓展的高阶文档。

写在最后 #

开发过程中遇到问题,请通过以下方式联系我,我会第一时间回复你:

License #

Copyright © 2020, Mark Chen. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

1.0.6 #

  • 修复顶部控制拦设置高度不起作用的BUG
  • 底部控制拦添加两个显示元素:当前播放时间、视频总时长;这两个元素可以在videoStyle中的videoControlBarStyle中分别设置字体大小、颜色及其边距
  • 优化调节亮度以及声音手势
  • 添加播放器初始化成功回调、网络状态变化回调、视频是否全屏回调、屏幕亮度变化回调以及声音大小回调
  • 修复全屏时点击返回物理按键注销播放器的BUG

1.0.5 #

  • 底部控制拦添加进度条样式

1.0.4 #

  • 修复视频拉伸

1.0.3 #

  • 添加滑动手势(左滑快退、右滑快进、左侧上/下滑屏幕亮度增亮/减弱、右侧上/下滑动音量增强/减弱).

1.0.2 #

  • 添加顶部控制栏.
  • example添加顶部控制栏示例(广告封面,返回)

1.0.1 #

  • 修复全屏拉伸.
  • 点击全屏按钮改为向左旋转

1.0.0 #

  • Initial release.

example/README.md

awsome_video_player_example #

Demonstrates how to use the awsome_video_player plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  awsome_video_player: ^1.0.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:awsome_video_player/awsome_video_player.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
61
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on Feb 17, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
connectivity ^0.4.6 0.4.6+2
flutter 0.0.0
orientation ^1.1.0 1.1.0
screen ^0.0.5 0.0.5
video_player ^0.10.5 0.10.7
Transitive dependencies
collection 1.14.11 1.14.12
flutter_web_plugins 0.0.0
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
video_player_platform_interface 1.0.4
video_player_web 0.1.2
Dev dependencies
flutter_test