exoplay切换全屏_Flutter 实现视频全屏播放逻辑及解析
一、前言
相信做过移动端视频开发的同学应该了解,想要实现视频从普通播放到全屏播放的逻辑并不是很简单,比如在 Surface 来替换实现:创建全新的 Surface ,并将对于的 View 添加到应用顶层的 DecorView 中;
在全屏时将新创建的 Surface 并设置到 Player Core ;
同步两个 View 的播放状态参数和旋转系统界面;
退出全屏时移除 DecorView 中的 Surface,切换 List Item 中的 Surface 给 Player Core ,同步状态。
当然,不同的播放内核可能还需要做一些额外操作,但是这一切在 Flutter 中就变得极为简单。事实上 Flutter 中实现全屏切换效果很简单,后面会一并介绍为什么在 Flutter 上实现会如此简单。
二、实现效果
如下图所示是 Flutter 中实现后的全屏效果,而实现这个效果的关键就是跳堆栈就可以了!是的,Flutter 中简单地跳页面就能够实现无缝的全屏切换。
如下代码所示,首先在正常播放页面下加入官方 video_player 插件的 VideoPlayer 控件,并且初始化 VideoPlayerController 用于加载需要播放的视频并初始化,另外此处还用了 Hero 控件用于实现页面跳转过渡的动画效果。
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://res.exexm.com/cw_145225549855002')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}
Container(
height: 200,
margin: EdgeInsets.only(
top: MediaQueryData.fromWindow(
WidgetsBinding.instance.window)
.padding
.top),
color: Colors.black,
child: _controller.value.initialized
? Hero(
tag: "player",
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
),
)
: Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
),
))
如下代码所示,之后在全屏的页面中同样使用 Hero 控件和 VideoPlayer 控件实现过渡动画和视频渲染。
这里的 VideoPlayerController 可以通过构造方法传递进来,也可以通过 InheritedWidget实现共享传递,只要是和前面普通播放界面的 controller 是同一个即可。
Container(
color: Colors.black,
child: Stack(
children: [
Center(
child: Hero(
tag: "player",
child: AspectRatio(
aspectRatio: widget.controller.value.aspectRatio,
child: VideoPlayer(widget.controller),
),
),
),
Padding(
padding: EdgeInsets.only(top: 25, right: 20),
child: IconButton(
icon: const BackButtonIcon(),
color: Colors.white,
onPressed: () {
Navigator.pop(context);
},
),
)
],
),
)
另外在 Flutter 中,只需要通过 SystemChrome.setPreferredOrientations 方法就可以快速实现应用的横竖屏切换。
最后如下代码所示,只需要通过 Navigator 调用页面跳转就可以实现全屏和非全屏的无缝切换了。
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return VideoFullPage(_controller);
}));
是不是很简单,只需要 VideoPlayer 、Hero 和 Navigator 就可以快速实现全屏切换播放的效果,那为什么在 Flutter 上可以这样简单的实现呢?
三、实现逻辑
之所以可以如此简单地实现动态化全屏效果,其实主要涉及到 video_player 插件在 Flutter 上的实现:外接纹理 Texture 。
因为 Flutter 中的控件基本上是平台无关的,而其控件主要是由 Flutter Engine 直接绘制,简单地说就是:原生平台仅仅提供了一个 Activity / ViewController 容器, 之后由容器内提供一个 Surface 给 Flutter Engine 用户绘制。
所以 Flutter 中控件的渲染堆栈是独立的,没办法和原生平台直接混合使用,这时候为了能够在 Flutter 中插入原生平台的部分功能,Flutter 除了提供了 PlatformView 这样的实现逻辑之外,还提供了 Texture作为 外接纹理的支持。
如上图所示,在Flutter 的界面渲染是需要经历 Widget-> RenderObject -> Layer 的过程,而在 Layer 的渲染过程中,当出现一个 TextureLayer 节点时,说明这个节点使用了 Flutter 中的 Texture 控件,那么这个控件的内容就会由原生平台提供,而管理 Texture 主要是通过 textureId 进行识别的。
举个例子,在 Android 原生层中 video_player 使用的是 exoplayer 播放内核,那么如上图所示,VideoPlayerController 会在初始化的时候通过 MethodChannel 和原生端通信,之后准备好播放内核和 Surface,最后将对应的 textureId 返回到 Dart 中。
所以在前面的代码中,需要在全屏和非全屏页面使用同一个 VideoPlayerController,这样它们就具备了同一个 textureId。
具备同一个 textureId 后,那么只要原生层不停止播放, textureId 对应的原生数据就一直处于更新状态,而这时候虽然跳转路由页面,但不同的 VideoPlayer 内部的 Texture 控件用的是同一个 VideoPlayerController,也就是同一个 textureId ,所以它们会呈现出通用的画面。
如下图所示,这个过程简单总结就是: Flutter 和原生平台通过 PixelBuffer 为介质进行交互,原生层将数据写入 PixelBuffer ,Flutter 通过注册好的 textureId 获取到 PixelBuffer 之后由 Flutter Engine 绘制。
最后需要注意的是,在 iOS 上在实现页面旋转时, SystemChrome.setPreferredOrientations 方法可能会出现无效,这个问题在 issue
另外 iOS 的页面旋转还确定是否打开了旋转配置的开关。
资源推荐
exoplay切换全屏_Flutter 实现视频全屏播放逻辑及解析相关推荐
- html5的播放绿屏,电脑看视频绿屏怎么办?看视频绿屏解决方法
经常在视频网站看视频的朋友,可能会遇到播放器出现绿屏的情况,原因出在flash,不细讲,直接上方法 法一.使用360安全卫士,人工服务==输入看视频分屏==立即修复. 法二.在你花屏的区域右击==设置 ...
- android录屏弹窗,android视频截屏手机录屏实现代码
本文介绍了android视频截屏&手机录屏实现代码,分享给大家,希望对大家有帮助 问题 在android中有时候我们需要对屏幕进行截屏操作,单一的截屏操作好解决可以通过activity的顶层v ...
- 电脑HTML5播放绿屏,电脑看视频绿屏怎么办?看视频绿屏解决方法
经常在视频网站看视频的朋友,可能会遇到播放器出现绿屏的情况,原因出在flash,不细讲,直接上方法 法一.使用360安全卫士,人工服务==输入看视频分屏==立即修复. 法二.在你花屏的区域右击==设置 ...
- python截图黑屏_python识别视频黑屏或者低清晰度
第一步:获取视频第一帧图片 第二步:进行识别 import os import numpy as np import cv2 as cv from skimage import filters, io ...
- android 视频投屏,USB视频投屏
USB视频投屏是一款非常好用的手机投屏软件,嫌手机屏幕太小,那就利用这款软件投屏到电视上吧.屏幕大,而且很清爽,画质清晰,一览无余.带给你不一样的观看感受.这款软件支持的类型也很多,不管是平板还是手机 ...
- 解决Chrome播放视频闪屏黑屏无法播放
解决方法 先说解决方法:Chrome→设置→硬件加速→关闭.如下图. 之前遇到的问题 使用 Chrome 浏览网页的时候,遇到自动播放的视频,有大概率会整个 Chrome 浏览器闪一下,闪屏变黑一秒钟 ...
- 小米盒子投屏+android,小米盒子投屏神器
小米盒子投屏神器是一款功能强大的手机投屏软件,小米盒子投屏神器提供视频投屏.游戏投屏.音乐投屏等功能,给你生活带来方便,喜欢快点投屏神器小伙伴赶紧下载使用吧. 快点投屏神器介绍 1.照片投屏,把您手机 ...
- 视频全屏非全屏切换,状态栏动态显示隐藏兼容性解决
列表中视频全屏/非全屏切换时,需要动态显示/隐藏状态栏 View类提供了setSystemUiVisibility和getSystemUiVisibility方法,这两个方法实现对状态栏的动态显示或隐 ...
- html5仿抖音全屏播放,仿抖音视频全屏播放滑动切换
1 前言 随着移动技术的快速迭代,数据流量费用的快速下降,视频.直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定 ...
- Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏)(可以作为遮罩来播放)
目录 一.目的: 1.Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏),所以将其记录下来 二.参考: 1.[AS3编程教学]如何加载并 ...
最新文章
- 放授权代码的php文件夹,自己的项目如果包含别人的开源代码,licence文件应放在哪里...
- javascript dom节点x
- 【小记】-005--纯CSS实现的小玩意儿
- Linux find命令、Linux rmdir命令、Linux ls命令
- SpatiaLite空间索引(一)
- [Android]Notification汇总
- 危机十足站长的生命觉悟:拼命也得每天挤一滴墨水!
- 将当前登录用户去重显示。
- web.xml/servlet过滤器之压缩UrlRewriteFilter
- 让UITableView数据处理更轻便
- gps天线拆解图片_威旺M20如何拆解中控导航及找出gps天线
- 【自学51单片机】1 -- 初步认识单片机及其学习方法 和 单片机基础知识介绍
- 恩典时代集团与深圳植慧科技产业签署合作备忘录
- 服务器ubuntu系统调节亮度,ubuntu 设置显示器的亮度
- 学生信息管理系统作业
- split().reverse().join()放一起 好记很多
- go编译库给c语言map参数,在 Go 中使用 C 语言的动态库
- 无法登录学校网站的解决办法
- 关于vue 动态引入(异步加载import和require)组件的方法和坑(按需懒加载组件,动态生成路由)babel-plugin-dynamic-import-node 优化编译速度
- 关于电脑硬盘灯常亮,电脑很卡问题
热门文章
- 数字电路——流水灯(二)_往返流水灯
- [英文邮件写作技巧] 表达感谢,提出问题,描述附件
- html图片上传java_PhoneGap 上传图片HTML和服务器端端实现(JAVA)
- 苹果成美国历史上市值最大公司
- MATRIX FACTORIZATION TECHNIQUES FOR RECOMMENDER SYSTEMS论文笔记;推荐系统中的矩阵分解(MF)
- MySQL 名次查询
- Android通过wifi输出声音,SoundWire – 将手机变成电脑的音箱,通过 WiFi播放电脑内的声音...
- python如何打印26个字母_python3打印26个英文字母
- 访问服务器显示我被拒绝,连接到服务器localhost:8080被拒绝(The connection to the server localhost:8080 was refused)...
- 自动驾驶汽车是如何利用高精度地图和高精度定位来导航