Flutter 实现视频全屏播放逻辑及解析

一、前言

相信做过移动端视频开发的同学应该了解，想要实现视频从普通播放到全屏播放的逻辑并不是很简单，比如在 GSYVideoPlayer 中的动态全屏切换效果，就使用了创建全新的

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: <Widget>[
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

三、实现逻辑

之所以可以如此简单地实现动态化全屏效果，其实主要涉及到

video_player

Texture

因为 Flutter 中的控件基本上是平台无关的，而其控件主要是由 Flutter Engine 直接绘制，简单地说就是：原生平台仅仅提供了一个

Activity

ViewController

Surface

所以 Flutter 中控件的渲染堆栈是独立的，没办法和原生平台直接混合使用，这时候为了能够在 Flutter 中插入原生平台的部分功能，Flutter 除了提供了

PlatformView

Texture

如上图所示，在《Flutter 完整实战详解》 中介绍过，Flutter 的界面渲染是需要经历

Widget

RenderObject

Layer

Layer

TextureLayer

Texture

Texture

textureId

举个例子，在 Android 原生层中

video_player

exoplayer

VideoPlayerController

MethodChannel

Surface

textureId

所以在前面的代码中，需要在全屏和非全屏页面使用同一个

VideoPlayerController

textureId

具备同一个

textureId

textureId

VideoPlayer

Texture

VideoPlayerController

textureId

如下图所示，这个过程简单总结就是： Flutter 和原生平台通过

PixelBuffer

PixelBuffer

textureId

PixelBuffer

最后需要注意的是，在 iOS 上在实现页面旋转时，

SystemChrome.setPreferredOrientations

另外 iOS 的页面旋转还确定是否打开了旋转配置的开关。

资源推荐

• 本文 Demo ： flutter_video_full_controller
• Github ： https://github.com/CarGuo
• 开源 Flutter 完整项目：https://github.com/CarGuo/GSYGithubAppFlutter
• 开源 Flutter 多案例学习型项目: https://github.com/CarGuo/GSYFlutterDemo
• 开源 Fluttre 实战电子书项目：https://github.com/CarGuo/GSYFlutterBook
• 开源 React Native 项目：https://github.com/CarGuo/GSYGithubApp

• 点赞
• 收藏
• 分享
• 文章举报