Flutter:基于video_player实现视频相关手势控制、全屏播放(2)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1. 主要功能

  1. 轻触屏幕弹出控制按钮(进度条、全屏播放按钮、暂停播放按钮、标题)
  2. 右侧滑动控制音量
  3. 左侧滑动控制亮度
  4. 水平滑动快进快退
  5. 双击暂停播放
  6. 播放时屏幕常亮

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. 定义属性

这里定义了三种读取视频的方式networkassetfile,分别对应网络视频工程视频本地视频文件

cla

  • 26
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值