详解如何在Flutter中使用媒体播放器
作者:程序那些事 发布时间:2021-06-26 01:40:43
简介
现在的app功能越来越强大,除了基本的图文之外,还需要各种各样的其他的功能,比如视频,和直播。
直播可能会比较复杂,因为涉及到了拉流和推流,需要服务器端的支持,但是视频播放就比较简单了,那么如何在flutter中使用媒体播放器呢?
一起来看看吧。
使用前的准备工作
flutter本身是不支持媒体播放功能的,为了实现这个功能,我们需要使用额外的第三方插件叫做video_player。
首先我们需要向flutter应用中添加video_player。添加起来也非常简单,只需要执行下面的命令即可:
flutter pub add video_player
该命令会向pubspec.xml中添加如下的内容:
dependencies:
flutter:
sdk: flutter
video_player: ^2.4.7
添加好依赖包之后,我们还需要为应用添加相应的权限,你确保能够使用影音播放的权限。
如果是在android中,需要向AndroidManifest.xml文件中添加类似下面的内容:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application ...>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>
在IOS中则需要在Info.plist中添加下面的内容:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
在flutter中使用video_player
video_player中和video播放相关的类叫做VideoPlayerController,在IOS中底层使用的是AVPlayer,在Android中底层使用的是ExoPlayer。
VideoPlayerController有好几种构造方法,我们一起来看看。
VideoPlayerController.asset
asset方法表示video是从应用程序的asset中获取的。
VideoPlayerController.network
network方法表示video是从网络中获取的。
VideoPlayerController.file
file方法表示video是通过'file://${file.path}' 这样的格式来获取的。
还有一个只用在andorid中的方法,表示从contentUri中加载video:
VideoPlayerController.contentUri
为了简单起见,这里我们选择网易上面的一个科教视频,作为要播放的video。
那么我们可以通过 VideoPlayerController.network方法来构建这个controller:
videoPlayerController = VideoPlayerController.network(
'https://flv.bn.netease.com/1c04bfd72901f0661b486465e09cfdc01754c20db0686786f4e20a5f7d271ba0de6c1177a0da1c4c2d7c367e20ee16d4a90ac7ff4ea664820ba1b401f3e53f135f72cdff855e78ca5fb7849fb6ff7ccb9de1613ad3bfc59db83493b5f18a0a27f15048df6585361cd67c3b37551e10981c40dcdfdb77b7e6.mp4',
);
在使用video之前,还需要进行初始操作,初始化是调用它的initialize方法,这个方法的作用是打开给定的数据源,并加载它的元数据。
因为initialize方法是一个耗时的操作,所以这个方法返回类型是Future:
Future<void> initialize() async {
我们可以这样使用:
late Future<void> playerFuture;
playerFuture = videoPlayerController.initialize();
有了播放器的Future,我们可以配合flutter中的FutureBuilder一起使用:
body: FutureBuilder(
future: playerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: videoPlayerController.value.aspectRatio,
child: VideoPlayer(videoPlayerController),
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
),
在FutureBuilder中,我们通过判断connectionState来判断视频是否加载完毕,如果没有加载完毕,则使用CircularProgressIndicator表示正在加载中。
如果加载完毕之后,就直接展示VideoPlayer组件即可。
因为不同的video有不同的纵横比,为了在flutter界面上完美的展示加载的video,我们将VideoPlayer封装在一个AspectRatio组件中。
最后我们还要添加一个控制装置,用来控制video的暂停和播放:
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
if (videoPlayerController.value.isPlaying) {
videoPlayerController.pause();
} else {
videoPlayerController.play();
}
});
},
child: Icon(
videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
)
这里通过videoPlayerController.value.isPlaying来判断视频是否在播放状态,同时在onPressed方法中调用了setState来调用videoPlayerController.pause或者videoPlayerController.play方法。
来源:https://juejin.cn/post/7215496238626832440
猜你喜欢
- 前言:Guarded Suspension意为保护暂停,其核心思想是仅当服务进程准备好时,才提供服务。设想一种场景,服务器可能会在很短时间内
- 一、叙述当Spring的事件(Application Event)为Bean和Bean之间的消息同步提供了支持。当一个Bean处理完成一个任
- @JSONField看源码它可以作用于字段和方法上。引用网上说的,一、作用Field@JSONField作用在Field时,其name不仅定
- FormClosing事件在窗体关闭时,FormClosing事件发生。此事件会得到处理。从而释放与窗体相关的所有资源。如果取消此事件,则窗
- MyEclipse配置IDEA配置Tomcat环境IDEA:2020.2Tomcat:apache-tomcat-9.0.38创建Web项目
- 目录问题:解答方案:总结问题:我遇到了一个有趣的问题,它的代码大概是这样的。List<Func<int>> acti
- TubeMQ总体介绍TubeMQ是腾讯大数据在2013年开始研发的分布式消息中间件系统(MQ),专注服务大数据场景下海量数据的高性能存储和传
- 最近在修改Android7.0原生平台的一些bug,其中有关Android Beam传输文件的一些问题还是蛮多的。所以特地找时间总结下曾经踏
- 没有阿里云数据库的可以买个最便宜的,我是新用户9.9元买了一个1.买到后点击左上角的工作台2.3. 4. 5.6.7.8
- 本文实例讲述了Android手机获取root权限并实现关机重启功能的方法,是Android程序设计中非常常见的重要功能。现分享给大家,供大家
- PhotoView的简介:这是一个图片查看库,实现图片浏览功能,支持pinch(捏合)手势或者点击放大缩小。支持在ViewPager中翻页浏
- 题主要区分清楚内码(internal encoding)和外码(external encoding)就好了。内码是程序内部使用的字符编码,特
- 前言convert 叫强制转换,可以是其他类型。最近在工作中遇到一个问题,需要将字符串形式的数值转换回数值,很正常的要求吧。却遇到了问题,下
- Step 1.依赖bannerGradledependencies{ compile 'com.youth.banner
- 某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加上5,然后除以10的余数代替该数字,再将第一
- The error simply says, “you've made changes in files in your works
- 前言android 防止重复点击是一个非常常见的需求,每个人都有各自的点击事件的处理习惯,有的喜欢使用匿名内部类,有的activity、fr
- webp格式图片webp格式图片是google推出的,相比jpg png有着巨大的优势,同样质量的图片webp格式的图片占用空间更小,在像电
- 本文实例为大家分享了Java流布局图形界面编写代码,供大家参考,具体内容如下package jisuanqi;import java.awt
- 一、编译步骤解压下载的GDAL源程序,并在命令行中切换到解压目录。tar -xzvf gdal-2.1.3.tar.gzcd gdal-2.