1. 主要功能
- 轻触屏幕弹出控制按钮(进度条、全屏播放按钮、暂停播放按钮、标题)
- 右侧滑动控制音量
- 左侧滑动控制亮度
- 水平滑动快进快退
- 双击暂停播放
- 播放时屏幕常亮
2. 安装组件
video_player: ^0.10.5
auto_orientation: ^1.0.5 //控制横竖屏控件
screen: ^0.0.5 //控制屏幕亮度以及屏幕常亮组件
common_utils: ^1.1.3 //格式化时间日期组件
3. 组件结构
为了代码可读性,我将该组件拆分成了3个控件,分别为 控制按钮控件
、手势滑动控件
、视频播放播放控件
。这三个控件依次嵌套默认填充满父控件。由于嵌套层数比较多,层层传递属性有点麻烦,因此我们这里使用一个InheritedWidget
共享数据:
import ‘package:flutter/material.dart’;
import ‘package:video_player/video_player.dart’;
import ‘video_player_control.dart’;
class ControllerWidget extends InheritedWidget {
ControllerWidget({
this.controlKey,
this.child,
this.controller,
this.videoInit,
this.title
});
final String title;
final GlobalKey controlKey;
final Widget child;
final VideoPlayerController controller;
final bool videoInit;
//定义一个便捷方法,方便子树中的widget获取共享数据
static ControllerWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType();
}
@override
bool updateShouldNotify(InheritedWidget oldWidget) {
// TODO: implement updateShouldNotify
return false;
}
}
这里面VideoPlayerController
这个controller我们后面会经常使用,用于调用操作视频相关api。
4. 入口控件VideoPlayerUI
4.1. 定义属性
这里定义了三种读取视频的方式network
、asset
、file
,分别对应网络视频
、工程视频
、本地视频文件
:
cla