Skip to content

G
gz_video_player
提交 1fb93802 authored 作者: jungleiOS's avatar jungleiOS
浏览文件
操作

开发文档更新

上级 aa705212
显示空白字符变更
内嵌 并排
正在显示 包含 855 行增加 和 9 行删除
README.md
浏览文件 @ 1fb93802
# gz_video_player
A new Flutter project.
项目基于 [awsome_video_player](https://github.com/chudongvip/awsome_video_player) 二次开发
## Getting Started
二次开发主要做的修改
This project is a starting point for a Flutter
[plug-in package](https://flutter.dev/developing-packages/),
a specialized package that includes platform-specific implementation code for
Android and/or iOS.
1. 项目兼容 Dart 3.0
2. 底层 video_player 升级到 2.7.0
3. 重写旋转插件兼容 iOS 16.0
4. 新增亮度、音量调节组件
5. 控制栏新增倍速播放
6. 替换保持长亮插件
# 原项目说明
一个简单易用的而且可高度自定义的播放器。
![原型图](readme_image/video_player.webp)
# 工欲善其事，必先利其器
闲话不多说我们直接上“干货”。
Q：播放器就播放器，为什么要强调上高度自由呢？
A：之所以强调高度自由是因为播放器上面的能见的元素你都可以去**更改**，同时提供很多的回调可以进行**自定义**处理。主要还是体现在了自定义这个方面。（你可以拿它去仿 blibli ，腾讯播放器等等）
Q：高度自由体现在哪些功能或者配置上面？
A：最能体现自由的是播放器的**自定义拓展元素**功能，但是往往很多集成的开发者都忽略了这一点，因为这个确实很方便，但是很多播放器都没能做到这一点；其次，利用**自定义顶部控制拦**可以添加很多 `actions`操作，通过**自定义拓展元素**这个功能来辅助实现；最后，**自定义底部控制拦**可以**添加或减少**控制元素，更改进度条的样式等等。
Q：播放器目前具备哪些能力？
A：目前还在完善当中，但是功能基本都已经完善了，剩下的就是根据开发者的反馈去优化和完善了，下面是我罗列的功能列表：
- 1.自定义图标（所有）
- 2.播放器自定义配置
- 视频开始播放的起始位置
- 是否自动播放
- 是否循环播放
- 视频比例
- 进度条是否允许拖拽
- 视频快进/快退的单位秒数
- 3.自定义拓展元素（无限）
- 字幕（也可以使用内置字幕）
- 弹幕
- 其他元素（例如：广告覆盖；自定义视频顶部返回按钮；快进或快退等操作的渐入渐出的提示等等）
- 4.自定义播放器样式
- 播放按钮是否显示（视频暂停时视图中央的播放按钮）
- 自定义播放按钮（视频暂停时视图中央的播放按钮）
- 顶部控制栏自定义
- 显示或隐藏
- 自定义高度
- 自定义边距
- 自定义背景颜色
- 自定义返回按钮
- 拓展中部元素（标题）
- 拓展右侧控制元素（更多操作）
- 底部控制栏自定义配置
- 自定义顺序（通过数组来控制元素：线形进度条、矩形进度条等）
- 自定义元素（通过数组来控制顺序）
- 自定义背景颜色
- 自定义图标（播放、暂停、快进、快退、全屏、取消全屏）
- 进度条样式自由配置（背景颜色、缓存区颜色、进度条颜色、拖拽按钮颜色、拖拽按钮颜色等）
- 音量控制元素（尚未完成）
- 内置弹幕（尚未完成，尚可自定义）
- 控制栏拓展（尚未完成）
- 内置字幕自定义配置(或者通过自定义拓展来自己重写字幕)
- 设置主字幕或辅字幕的字体大小
- 设置主字幕或辅字幕的字体颜色
- 5.手势支持
- 单击（菜单栏显示或隐藏）
- 双击（暂停或播放）
- 滑动快进或快退
- 滑动调整视频亮度 （左侧区域）
- 滑动调整音量大小（右侧区域）
- 6.横竖屏切换
- 7.常亮避免锁屏
# 效果图
![一张效果图](readme_image/video_example.webp)
# 播放器属性
![逻辑思维图](https://upload-images.jianshu.io/upload_images/4406914-a68e4c8716b78fd9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
通过上图我们可以看一下播放器都有哪些属性呢？
| 属性 | 类型 | 描述 |
| ----------- | ---------------- | --------------------------------------------------------------------------------------------------------------- |
| dataSource | String | 视频URL或媒体文件的路径 |
| sourceType | DataSourceType | 数据类型 asset network file contentUri |
| playOptions | VideoPlayOptions | 视频播放自定义配置，包含是否自动播放，是否循环播放等（详情见下方的**Useage**） |
| videoStyle | VideoStyle | 视频播放器自定义样式，自定义顶部控制拦样式、自定义底部控制拦样式、自定义Loading样式等（详情见下方的**Useage**） |
| children | List\<Widget\> | 自定义拓展的元素，需要使用 Widget `Align`（字幕、弹幕、广告、封面等其他自定义元素） |
| brightnessWidget | Widget? | 亮度调节反馈组件可以自定义，不设置使用默认亮度组件 |
| volumeWidget | Widget? | 音量调节反馈组件可以自定义，不设置使用默认音量组件 |
| 回调方法 | 类型 | 描述 |
| -------------- | -------------------------------------- | ----------------------------------------------- |
| onInit | ValueChanged\<VideoPlayerController\> | 初始化完成回调 |
| onPlay | ValueChanged\<VideoPlayerValue\> | 视频开始播放的回调 |
| onPause | ValueChanged\<VideoPlayerValue\> | 视频暂停播放回调 |
| onTimeupdate | ValueChanged\<VideoPlayerValue\> | 视频播放进度回调（通过返回的value进行字幕匹配） |
| onEnd | ValueChanged\<VideoPlayerValue\> | 视频播放结束回调 |
| onVolume | ValueChanged\<double\> | 播放声音大小变化回调 |
| onBrightness | ValueChanged\<double\> | 屏幕亮度变化回调 |
| onPop | ValueChanged\<VideoPlayerValue\> | 顶部控制栏返回按钮点击回调 |
| onNetwork | ValueChanged\<String\> | 网络变化回调 |
| onFullscreen | ValueChanged\<bool\> | 视频是否全屏回调 |
| onProgressdrag | VideoProgressDragHandle | 进度条被拖拽的回调 |
| onSpeedChange | ValueChanged\<VideoSpeedItem\> | 倍速改变后的回调 |
## 播放器自定义配置 (VideoPlayOptions)
| 属性 | 类型 | 描述 |
| --------------------- | -------- | -------------------------------------------------------------------------------------------- |
| startPosition | Duration | 开始播放节点，例如：Duration(seconds: 0)) |
| loop | bool | 是否循环播放 |
| seekSeconds | num | 设置视频快进/快退单位秒数，默认为`15s` |
| progressGestureUnit | num | 设置（横向）手势调节视频进度的秒数单位，默认为`1s` |
| volumeGestureUnit | num | 设置（右侧垂直）手势调节视频音量的单位，必须为0～1之间（不能小于0，不能大于1），默认为`0.005` |
| brightnessGestureUnit | num | 设置（左侧垂直）手势调节视频亮度的单位，必须为0～1之间（不能小于0，不能大于1），默认为`0.005` |
| autoplay | bool | 是否自动播放 |
| aspectRatio | num | 视频播放比例，例如：16/9 或者 4/3 |
| allowScrubbing | bool | 是否允许进度条拖拽 |
| speedList | VideoSpeedItem| 预配置播放倍数默认 0.5 0.75 1.0 1.25 1.5 1.75 2.0 尽量不要超过2倍速，iOS 超过2倍数和不会生效 |
## 播放器自定义样式 (VideoStyle)
| 属性 | 类型 | 描述 |
| -------------------- | -------------------- | ----------------------------------------------------------------------- |
| playIcon | Widget | 视频暂停播放时中央显示的图标，showPlayIcon为`false`时，该属性设置无效。 |
| replayIcon | Widget | 视频结束时中央显示的重播图标，showReplayIcon为`false`时，该属性设置无效。 |
| showPlayIcon | bool | 暂停时是否显示播放按钮 |
| showReplayIcon | bool | 视频播放结束时是否显示重播按钮 |
| videoTopBarStyle | VideoTopBarStyle | 视频顶部自定义样式（详情见下方的**Useage**） |
| videoControlBarStyle | VideoControlBarStyle | 控制栏自定义样式（详情见下方的**Useage**） |
| videoSubtitlesStyle | VideoSubtitles | 字幕自定义样式（详情见下方的**Useage**） |
| videoLoadingStyle | VideoLoadingStyle | 视频缓冲或者初始化Loading的自定义样式（详情见下方的**Useage**） |
| videoSpeedButtonStyle | VideoSpeedButtonStyle | 控制栏默认倍数按钮样式 |
| videoSpeedItemStyle | VideoSpeedItemStyle | 视频倍速 item 样式 |
| videoBrightnessStyle | VideoBrightnessStyle | 亮度调节组件样式 |
| videoVolumeStyle | VideoVolumeStyle | 音量调节组件样式 |
### 自定义顶部控制栏 (VideoTopBarStyle)：
| 属性 | 类型 | 描述 |
| ------------------ | -------------- | ------------------------------------------------------------------------------------------------- |
| show | bool | 是否显示控制栏 |
| barBackgroundColor | Color | 控制栏背景颜色，默认为`Color.fromRGBO(0, 0, 0, 0.5)` |
| height | double | 自定义控制栏高度 |
| padding | EdgeInsets | 自定义边距 |
| popIcon | Widget | 自定义返回按钮 |
| contents | List\<Widget\> | 拓展控制栏中部元素（宽度自适应： `Row`中的 `Expanded`） |
| actions | List\<Widget\> | 拓展控制栏右侧控制元素 |
| customBar | Widget | 重写控制栏（如果设置了`customBar`, 除`show`属性意外上方属性均不生效）,仅支持`Align`和`Positioned` |
![自定义顶部控制栏](readme_image/video_top_bar.webp)
### 自定义底部控制栏样式 (VideoControlBarStyle)：
| 属性 | 类型 | 描述 |
| ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| height | double | 控制栏高度，默认为`30` |
| padding | EdgeInsets | 控制栏内边距，默认为`EdgeInsets.symmetric(vertical: 8, horizontal: 10)` |
| progressStyle | VideoProgressStyle | 自定义控制拦进度条样式 |
| barBackgroundColor | Color | 控制栏背景颜色，默认为`Color.fromRGBO(0, 0, 0, 0.5)` |
| timePadding | EdgeInsets | 视频时间的内边距，默认为`EdgeInsets.symmetric(horizontal: 5)` |
| timeFontSize | double | 视频时间的字体大小，默认为`8` |
| timeFontColor | Color | 视频时间的颜色，默认为`Color.fromRGBO(255, 255, 255, 1)` |
| playIcon | Widget | 控制栏播放图标（下`图3`详细说明） |
| pauseIcon | Widget | 控制栏暂停图标（下`图3`详细说明） |
| rewindIcon | Widget | 控制栏快退图标（下`图3`详细说明） |
| forwardIcon | Widget | 控制栏快进图标（下`图3`详细说明） |
| fullscreenIcon | Widget | 控制栏全屏图标（下`图3`详细说明） |
| fullscreenExitIcon | Widget | 控制栏取消全屏图标（下`图3`详细说明） |
| itemList | List\<String\> | 控制栏自定义功能（下`图4`详细说明），默认为["rewind", "play", "forward", "position-time", "progress", "duration-time", "fullscreen"]。如果我们需要调整控制栏显示的顺序，仅需要调整 list 中字符串的顺序，如果需要删减，直接从 list 中移除改字符串即可，例如移除快进和快退，则讲 list 设置为 ["play", "progress","position-time", "progress", "duration-time", "fullscreen"] 即可。后面会陆续开放自定义元素，也就是你把你的元素加入到 list 中。 |
![图3](readme_image/video_control_bar_icon.webp)
![图4](readme_image/video_control_bar.webp)
### 自定义进度条样式 (VideoProgressStyle) ：
| 属性 | 类型 | 描述 |
| --------------- | ---------- | ---------------------------------------------------- |
| padding | EdgeInsets | 进度条边距（`itemList`中包含`progress`有效） |
| height | double | 进度条高度（`itemList`中包含`progress`有效） |
| dragHeight | double | 进度条拖拽按钮高度（`itemList`中包含`progress`有效） |
| progressRadius | double | 进度条圆角（`itemList`中包含`progress`有效） |
| playedColor | Color | 已播放的进度条颜色（见下图） |
| bufferedColor | Color | 已缓冲的进度条颜色（见下图） |
| backgroundColor | Color | 进度条背景颜色（见下图） |
| dragBarColor | Color | 进度条拖拽按钮演示（`itemList`中包含`progress`有效） |
![更改颜色](readme_image/video_progress_style.webp)
### 自定义速度栏样式
| 属性 | 类型 | 描述 |
| -------------- | ---------------------- | ------------------------------------------------------|
| speedItemList | List\<VideoSpeedItem\> | 速度 item 列表，item 包括速度：speed 与速度标题 title属性 |
| style | VideoSpeedItemStyle | 速度item 样式 |
| onTapItem | ValueChanged<int>? | 选中的 item 索引 回调 |
| hidden | bool | 是否隐藏，点击控制栏倍速显示，选中倍速后隐藏 |
### 自定义音量组件样式
| 属性 | 类型 | 描述 |
| -------------- | ---------------------- | ------------------------------------------------------|
| size | Size | 音量组件尺寸，默认 `const Size(30.0, 100.0)` |
| backgroundColor | Color | 背景色，默认 `Colors.black.withOpacity(0.5)` |
| fillColor | Color | 填充色，默认 `Colors.white` |
| iconColor | Color | 音量图标颜色，默认`Colors.black` |
| iconSize | double | 音量图标尺寸，默认 20 |
| textStyle | TextStyle | 音量值文本颜色，`const TextStyle(fontSize: 11.0)` |
| borderRadius | BorderRadius | 组件圆角 `const BorderRadius.all(Radius.circular(6.0))` |
### 自定义亮度组件样式
| 属性 | 类型 | 描述 |
| --------------- | ---------------------- | ------------------------------------------------------|
| brightnessIcon | Icon | 亮度图标，默认`const Icon(Icons.sunny,size: 40.0,color: Colors.white)` |
| size | Size | 组件尺寸，默认`const Size(80.0, 80.0)` |
| borderRadius | BorderRadius | 组件圆角 `const BorderRadius.all(Radius.circular(6.0))` |
| backgroundColor | Color | 背景色，默认 `Colors.black.withOpacity(0.5)` |
| textStyle | TextStyle | 文本颜色，`const TextStyle(fontSize: 11.0)` |
### 自定义控制栏功能 (itemList) ：
| 属性 | 类型 | 描述 |
| -------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| rewind | String | 快退功能，对应`VideoControlBarStyle`的`rewindIcon`图标 |
| play | String | 播放/暂停功能，对应`VideoControlBarStyle`的`playIcon` `pauseIcon`图标 |
| forward | String | 快进功能，对应`VideoControlBarStyle`的`forwardIcon`图标 |
| progress | String | 线条形进度条（与‘basic-progress’二选一），由`VideoControlBarStyle`的`progressStyle`控制样式 |
| basic-progress | String | 矩形进度条（与‘progress’二选一），由`VideoControlBarStyle`的`progressStyle`控制样式 |
| time | String | 时间格式：当前时间/视频总时长（与`position-time`和`duration-time`二选一），由`VideoControlBarStyle`的`timePadding` `timeFontSize` `timeFontColor`控制样式 |
| position-time | String | 当前播放时间，样式控制与`time`相同 |
| duration-time | String | 视频总时长，样式控制与`time`相同 |
| speed | String | 视频播放倍速，样式控制由 `VideoSpeedButtonStyle` 控制 |
| fullscreen | String | 全屏/小屏功能，对应`VideoControlBarStyle`的 `fullscreenIcon` `fullscreenExitIcon`图标 |
## Useage
这是一个完整的DEMO
main.dart
```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: (controller) {
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. 自定义控制栏图标
首先我来看一下控制栏的图标自定义（见上图1）:
>DEMO: main.dart
```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. 自定义控制栏元素和顺序
我们可以根据`videoStyle`中`videoControlBarStyle`来自定义控制栏的样式：调整顺序（见上方图3）只需要调整 `itemList`中字符串的顺序即可；控制显示的元素，将不需要暂时的元素从 `itemList` 中删除即可。
>DEMO: main.dart
```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. 自定义进度条以及控制栏的背景颜色
同样我们还是通过`videoStyle`中`videoControlBarStyle`来自定义进度条的颜色（见上方图3）。
>DEMO: main.dart
```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. 自定义顶部控制栏
通过`videoStyle`中`videoTopBarStyle`来自定义顶部控制栏。
*DEMO*
![image](https://upload-images.jianshu.io/upload_images/4406914-bdfbb943f7b2f88d?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
>DEMO: main.dart
```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`不能为空，为空时使用加载视图，否则播放器会报错
```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";
@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`仅支持`Align`和`Positioned`，children的层级会高于下面，这个功能会持续更新，后面会陆续出一些针对自定义拓展的高阶文档。
## FAQ
- http协议的地址播放错误?
从 `Android9.0 (API 28)`起，应用默认禁止http请求，需要在`AndroidManifest.xml`中配置以下内容
```xml
<application
...
android:usesCleartextTraffic="true"
...
>
```
For help getting started with Flutter development, view the
[online documentation](https://flutter.dev/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
## ios 16 旋转
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论