Flutter 實現影片全螢幕播放邏輯及解析

  • 2020 年 2 月 24 日
  • 筆記

一、前言

相信做過移動端影片開發的同學應該了解,想要實現影片從普通播放到全螢幕播放的邏輯並不是很簡單,比如在 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