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

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

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

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.depen

  • 22
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值