最近公司需要开发视频播放的功能,官方提供的video_player除了视频播放功能就没有提供其他的控制功能,包括最基本的全屏播放功能。同时也比较了一下第三方组件也不是很能满足需求。那我们就只好自己动手在video_player
基础上进行改造。由于使用的纯flutter进行开发android、ios上界面一致。废话不多说直接上图:
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.depen