成都创新互联网站制作重庆分公司

flutter视频展示的简单介绍

Flutter开发--视频播放器

目前Flutter平台主流的两个播放器是video_player和fijkplayer

平江ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

pub

github

1、Flutter平台官方插件,作者是国外的,有问题沟通比较困难,只能通过提交issue

2、硬解码

4、UI封装: better_player

基于video_player和Chewie的高级视频播放器。它解决了许多典型的用例,并且易于运行。

5、播放器宽高比例与视频内容宽高比例不一致时,会出现图像压缩变形的问题

6、调用原生内核播放器:iOS--AVPlayer, Android--ExoPlayer

7、对于分段源 m3u8 的播放不友好,如果一个切片播放超时,会导致整个播放都失败

8、better_player可以缓存视频,但不能自定义缓存的地址,只能指定key,和缓存的最大内存量(还未研究超出最大的话是不能缓存新的,还是删除最旧的)

9、better_player不能完全自定义UI,只能修改类中的一些开放属性,比如说icon图标,文字颜色啥的

10、无网络有缓存时,封面可以正常展示

11、better_player播放失败有手动retry的设计

pub

github

1、fijkplayer 是一个 Flutter 生态的媒体播放器,是对 ijkplayer 的 Flutter 封装,支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作为播放器内核,ijkplayer 使用 ffmpeg 进行音视频解封装和解码,同时添加了 Android 和 iOS 平台特有的硬件加速解码能力。

2 、国内有QQ群,但是活跃度也是不高。

3、可以缓存视频,可以自定义缓存的地址,方便后续的内存维护。

4、可以通过FijkPanelWidgetBuilder较大程度上自定义UI。

5、无网络有缓存视频时,无法展示封面,因为内部是通过imageProvider去加载网络图片的。

7、播放失败无手动retry的设计

1、两种播放器都是通过外接纹理方案 (Texture),将播放器视频画面渲染接入 flutter 中,性能上优于 PlatformView 的接入方法。

如何自己实现?

下面以video_palyer的iOS源码部分解释:

iOS用CVPixelBufferRef将渲染出来的数据存在内存中,Flutter engine会将Texture的数据在内存中直接进行映射无需通过Channel传输,然后Texture Widget就可以把你提供的这些数据显示出来。在我们传输数据的时候会需要将其与 TextureID 绑定,绑定的过程通过BasicMessageChannel实现数据流的传输,以做到实时展示的效果

Flutter上线项目实战——Vap视频动画

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架,最终我们选中 腾讯vap ,它支持了Android、IOS、Web,为我们封装flutter_vap提供了天然的便利,并且它提供了将帧图片生成带alpha通道视频的工具,这简直太赞了。

VAP(Video Animation Player)是企鹅电竞开发,用于播放酷炫动画的实现方案。

video for youtube

video for qiniu

apk download

github

Flutter视频播放器,简洁!

注:亮度调节和音量调节gif无法体现,功能是ok的,其次默认Icon锁的close和open实在难以分辨。

环境:Flutter 2.8.1 channel stable ;Dart 2.15.1

需要音频播放器的看这里: Flutter音乐播放器

重点说下这个工具类,因为视频播放,涉及到状态改变有很多,笔者刚开始选择使用 InheritedWidget 来在众多的widget之间共享数据。但是总感觉这样有点繁琐,且不很优雅!

这里非广告,如果是使用 GetX 就很简单了,笔者也使用了 GetX 进行封装了,一泻千里的赶脚!,但是笔者还是那句话:刚开始接触Flutter的开发者不是很建议使用 GetX ,可以先熟悉下Flutter状态管理的基础原理再行使用。而且为了尽量简洁,还是不引入其他的第三方了。

我们选择对第三方插件进行封装的目的不外乎这几个:

于是笔者就写了一个工具类 VideoPlayerUtils ,专门且只用来处理播放器的所有业务。包括暂停、播放、跳转、调节音量、调节亮度、切换视频等操作。在所有的widget中不会引用关于 video_player 或其他第三方插件的任何信息, VideoPlayerUtils 负责widget与播放器之间的所有操作交互。后续优化迭代或更换播放器插件时,只需针对这个工具类进行修改,对所有widget不会有任何的影响,大大的解耦合了。

其中 VideoPlayerState :

提供以上的公共属性,可以通过 VideoPlayerUtils 来获取对应的值,使用 get 只读,使外界不会误修改这些属性,以保证数值的安全性。开发者可根据自身需要自行添加属性。

提供以上方法来处理播放器的所有业务。同样的开发者可根据自身需要自行添加或修改。

重点说下这个方法,是整个业务的核心方法,控制视频的播放或暂停。开发者只要遇到播放或暂停是均可调用此方法,具体是播放或暂停,内部根据传入的 url 自行判断,开发者不需要关心。

切换新视频也是使用此方法,传入的 url 与上次不一致,自动切换新视频。笔者可根据 statusListener 来监听播放状态的改变,以此处理自身逻辑。

这个也需要提下,视频播放器在播放新视频时会异步初始化,一般我们的操作是在 initState() 初始化,成功后再 setState() 。这里笔者遇到一个让人蛋疼的问题:

我们看 video_player 的使用:

VideoPlayer(controller) :widget中已经持有了controller。本来笔者封装的目的就是为了让widget与controller的之间解耦合。但此时的笔者。。。。

放弃不是不可能放弃的,这辈子都不会放弃的!

于是笔者取了巧,写了一个初始化监听器 initializedListener ,包换2个参数: bool,Widget ,初始化是否成功;其中widget为初始化成功返回需要展示的播放器UI,失败默认返回 const SizedBox() 。

到这里就可以简单使用了:

没看错,视频播放就是这么简单。

如果有更多的业务功能,笔者也按照自己的需求写了一套,同样的开发者可根据自身需要自行添加或修改。

VideoPlayerGestures 主要是处理手势的,比如快进、快退等跳转播放;左侧上下滑动调节亮度;右侧上下滑动调节音量;单击是否开启沉浸式播放,所有widget的隐藏与显示;双击播放、暂停等。

哦,还有 PercentageWidget 也放到这个文件下了,就是这玩意:

因为显示的百分比与手势相关,随着手势移动而更新。开发者可自行处理。

笔者处出于简单考虑,就按照整个UI的位置命名了。瞅一眼就知道是啥玩意。

同样的开发者可根据自身需要自行添加或修改。

就是这玩意:

同样的开发者可根据自身需要自行添加或修改。话说这个锁的 Icon 的open和close是真的难分辨!

就是这玩意:

同样的开发者可根据自身需要自行添加或修改。

这玩意是自定义的,别问,问就是跟产品干一架落了下风

主要就是自定义这玩意:

同样的开发者可根据自身需要自定义。

注:这里没有添加缓冲的进度,开发可查看 video_player 中的源码 VideoProgressIndicator ,按业务自行定义。

这玩意就是整合以上的widget,再考虑下全屏的安全区域,没啥东西。开发者可自行处理!

具体的实现监听器的思路, 看这里 。

自此一个漂亮的Flutter视频播放器就已经结束了。如果您觉得对您有些许帮助的话,欢迎 Star !


文章题目:flutter视频展示的简单介绍
文章来源:http://cxhlcq.com/article/phjohc.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部