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

本文介绍了如何在Flutter应用中使用video_player库实现视频的初始化、全屏播放和手势控制。通过创建ControllerWidget和VideoPlayerUI组件,详细讲解了视频加载、监听、切换源及控制界面显示的方法。此外,还提到了VideoPlayerControl组件,用于轻触显示控制界面和全屏切换,并提供了相关代码示例。
摘要由CSDN通过智能技术生成

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,分别对应网络视频工程视频本地视频文件

class VideoPlayerUI extends StatefulWidget {
VideoPlayerUI.network({
Key key,
@required String url, // 当前需要播放的地址
this.width: double.infinity, // 播放器尺寸(大于等于视频播放区域)
this.height: double.infinity,
this.title = ‘’, // 视频需要显示的标题
}) : type = VideoPlayerType.network,
url = url,
super(key: key);

VideoPlayerUI.asset({
Key key,
@required String dataSource, // 当前需要播放的地址
this.width: double.infinity, // 播放器尺寸(大于等于视频播放区

  • 22
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A:以下是一个简单的 Flutter video_player 视频播放器模板供参考: ```dart import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.asset('videos/sample.mp4') ..initialize().then((_) { setState(() {}); }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Video Player'), ), body: Center( child: _controller.value.initialized ? AspectRatio( aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller), ) : Container(), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _controller.value.isPlaying ? _controller.pause() : _controller.play(); }); }, child: Icon( _controller.value.isPlaying ? Icons.pause : Icons.play_arrow, ), ), ), ); } @override void dispose() { super.dispose(); _controller.dispose(); } } ``` 在本例中,我们使用 asset 目录下的示例视频文件来初始化 VideoPlayerController。在 initState() 生命周期中,我们调用 initialize() 方法来初始化该控制器,并在该过程完成后(即视频准备就绪后)调用 setState() 来更新 UI。在 build() 方法中,我们检查视频控制器的 initialized 属性,如果视频已经准备就绪,则使用 AspectRatio 和 VideoPlayer视频呈现为全屏可见的占位符。我们还在右下方添加了一个 FloatingActionButton,允许用户播放或暂停视频。最后,我们在 dispose() 生命周期中释放了视频控制器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值