专栏首页移动开发之家Flutter 实现视频全屏播放逻辑及解析

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

一、前言

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

  • 创建全新的 Surface ,并将对于的 View 添加到应用顶层的 DecorView 中;
  • 在全屏时将新创建的 Surface 并设置到 Player Core ;
  • 同步两个 View 的播放状态参数和旋转系统界面;
  • 退出全屏时移除 DecorView 中的 Surface,切换 List Item 中的 Surface 给 Player Core ,同步状态。

image

当然,不同的播放内核可能还需要做一些额外操作,但是这一切在 Flutter 中就变得极为简单。

事实上 Flutter 中实现全屏切换效果很简单,后面会一并介绍为什么在 Flutter 上实现会如此简单。

二、实现效果

如下图所示是 Flutter 中实现后的全屏效果,而实现这个效果的关键就是跳堆栈就可以了!是的,Flutter 中简单地跳页面就能够实现无缝的全屏切换。

image

如下代码所示,首先在正常播放页面下加入官方 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);
                  }));

是不是很简单,只需要 VideoPlayerHeroNavigator 就可以快速实现全屏切换播放的效果,那为什么在 Flutter 上可以这样简单的实现呢?

三、实现逻辑

之所以可以如此简单地实现动态化全屏效果,其实主要涉及到 video_player 插件在 Flutter 上的实现:外接纹理 Texture

因为 Flutter 中的控件基本上是平台无关的,而其控件主要是由 Flutter Engine 直接绘制,简单地说就是:原生平台仅仅提供了一个 Activity / ViewController 容器, 之后由容器内提供一个 Surface 给 Flutter Engine 用户绘制。

所以 Flutter 中控件的渲染堆栈是独立的,没办法和原生平台直接混合使用,这时候为了能够在 Flutter 中插入原生平台的部分功能,Flutter 除了提供了 PlatformView 这样的实现逻辑之外,还提供了 Texture作为 外接纹理的支持。

image

如上图所示,在《Flutter 完整实战详解》 中介绍过,Flutter 的界面渲染是需要经历 Widget -> RenderObject -> Layer 的过程,而在 Layer 的渲染过程中,当出现一个 TextureLayer 节点时,说明这个节点使用了 Flutter 中的 Texture 控件,那么这个控件的内容就会由原生平台提供,而管理 Texture 主要是通过 textureId 进行识别的

image

举个例子,在 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 绘制

image

最后需要注意的是,在 iOS 上在实现页面旋转时, SystemChrome.setPreferredOrientations 方法可能会出现无效,这个问题在 issue #23913#13238 中有提及,这里可能需要自己多实现一个原生接口进行兼容,当然在 auto_orientation 或者 orientation 等第三方库也进行了这方面的兼容。

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

image

资源推荐

image

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【译】Flutter 1.20 发布

    谷歌对 Flutter 的定位是提供一个便捷的工具包,从而在任何设备上得到出色的绘制体验,所以对于每个 release 版本,将会努力确保 Flutter 能快...

    恋猫
  • Flutter 1.12 最新 hotfix 与 2020 路线计划

    大年初三的时候 v1.12.13+hotfix.7 终于发布了,该版本发布后总算把 1.12.13 版本上的几个大坑填完,算是达到“能用”的稳定版本;同时 1 ...

    恋猫
  • Flutter Interact 的 Flutter 1.12 大进化和回顾

    昨天谷歌为在 Flutter Interact 上为我们带来了 Flutter 1.12 ,这是 1.9.x 的版本在经历 6 次 hotfix 之后,才带来的...

    恋猫
  • 【译】Flutter 1.20 发布

    谷歌对 Flutter 的定位是提供一个便捷的工具包,从而在任何设备上得到出色的绘制体验,所以对于每个 release 版本,将会努力确保 Flutter 能快...

    恋猫
  • 跨平台技术演进及Flutter未来

    移动互联网发展十余年,伴随着 Android、iOS 等智能手机的不断普及,移动端已逐步取代 PC 端,成为兵家必争之地。正所谓“得移动端者得天下”,移动端已成...

    程序亦非猿
  • 革命性移动端开发框架-Flutter时间简史

    说到Flutter,可能很多同学都会将它和这几个词关联起来:新兴的、移动端、动态化、跨平台、开发框架。

    猿哥
  • Flutter 学习路线图

    Flutter越来越火,学习Flutter的人越来越多,对于刚接触Flutter的人来说最重要的是如何学习Flutter,重点学习Flutter的哪些内容。下面...

    老孟Flutter
  • Flutter 核心原理与混合开发模式

    在 「Fan 直播」的 Flutter 混合开发实践中,我们总结了一些 Flutter 混合开发的经验。本文第一篇章将从 Flutter 原理出发,详细介绍 ...

    QQ音乐技术团队
  • 【Flutter 专题】85 Flutter Attach 调试 Flutter Code

    在实际开发过程中,为了满足项目业务方面以及兼容历史代码等方面,经常会采取 Flutter 功能模块以 aar 或 Module 等引入方式;而 Flutter ...

    阿策
  • 闲鱼基于Flutter技术的架构演进和创新

    最近一段时间一直学习Flutter,也尝试写一下Demo,但是在用的时候。从一开始惊艳到了,觉得写起来很爽,各种UI效果实现起来很棒,而且由于渲染机制,还让双端...

    Demo_Yang

扫码关注云+社区

领取腾讯云代金券