flutter悬浮视频的简单介绍

Flutter 零基础入门实战视频教程（28 个视频）

Flutter 零基础入门实战视频教程 #01 环境搭建 「14:03」

志丹网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联公司于2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

Flutter 零基础入门实战视频教程 #02 Dart 语言 「17:49」

Flutter 零基础入门实战视频教程 #03 建立 Android studio 虚拟设备 「04:12」

Flutter 零基础入门实战视频教程 #04 建立第一个项目 「08:23」

Flutter 零基础入门实战视频教程 #05 安装配置过程中可能遇到的问题（没遇到者可以跳过） 「05:07」

Flutter 零基础入门实战视频教程 #06 运行 iOS 模拟器 「04:07」

Flutter 零基础入门实战视频教程 #07 Flutter 概述 「06:15」

Flutter 零基础入门实战视频教程 #08 Scaffold AppBar 「Pro」「06:50」

Flutter 零基础入门实战视频教程 #09 文档和快捷键 「Pro」「02:36」

Flutter 零基础入门实战视频教程 #10 颜色 Colors 「Pro」「05:47」

Flutter 零基础入门实战视频教程 #11 自定义字体 fonts 「Pro」「05:09」

Flutter 零基础入门实战视频教程 #12 hot reload StatelessWidget 「Pro」「04:56」

Flutter 零基础入门实战视频教程 #13 使用图片 「Pro」「04:59」

Flutter 零基础入门实战视频教程 #14 使用图标 - Icon 「Pro」「01:27」

Flutter 零基础入门实战视频教程 #15 Button 按钮使用指南 「Pro」「04:35」

Flutter 零基础入门实战视频教程 #16 Container 和 Padding 「Pro」「04: 52」

Flutter 零基础入门实战视频教程 #17 Row 「Pro」「05:24」

Flutter 零基础入门实战视频教程 #18 Column 「Pro」「05:36」

Flutter 零基础入门实战视频教程 #19 Flutter Outline Shortcuts 「Pro」「03:18」

Flutter 零基础入门实战视频教程 #20 Expanded Widgets 「Pro」「06:06」

Flutter 零基础入门实战视频教程 #21 实战开始 「Pro」「11:42」

Flutter 零基础入门实战视频教程 #22 换个编辑器 - Visual Studio Code 「Pro」「04:50」

Flutter 零基础入门实战视频教程 #23 Stateful vs Stateless Widget 「Pro」「09:45」

Flutter 零基础入门实战视频教程 #24 列表处理 「Pro」「04:54」

Flutter 零基础入门实战视频教程 #25 自定义 class 「Pro」「05:37」

Flutter 零基础入门实战视频教程 #26 card widget 「Pro」「04:26」

Flutter 零基础入门实战视频教程 #27 Extracting Widgets 「Pro」「06:59」

Flutter 零基础入门实战视频教程 #28 删除 - Functions as Parameters - 完结 - 进入实战课 「Pro」「04:35」

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- 全局悬浮可拖动的Widget

那天,产品经理说“我在微信朋友圈里点了别人分享出来的歌曲链接 听了会歌 那歌简直了 好听 退到聊天界面 出现了个悬浮的歌曲图标 那我们能不能做类似的 在所有页面都会存在这样一个悬浮图标 这个图标目前要有打客服电话功能”。

我一心想，这人真会搞事 哈哈。行 满足他

事实上有一个Overlay的widget,它的createState方法获取的就是OverlayState对象.

Overlay可以认为是一个UI上面的蒙版/浮空层,使用起来类似Stack;

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

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

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

video for youtube

video for qiniu

apk download

github

Flutter开发--视频播放器

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

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实现数据流的传输，以做到实时展示的效果