一、前言
相信做過移動端視訊開發的同學應該瞭解，想要實現視訊從普通播放到全屏播放的邏輯並不是很簡單，比如在 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 就可以快速實現全屏切換播放的效果，那為什麼在 Flutter 上可以這樣簡單的實現呢？
三、實現邏輯
之所以可以如此簡單地實現動態化全屏效果，其實主要涉及到 video_player 外掛在 Flutter 上的實現：外接紋理 Texture 。
因為 Flutter 中的控制元件基本上是平臺無關的，而其控制元件主要是由 Flutter Engine 直接繪製，簡單地說就是：原生平臺僅僅提供了一個 Activity / ViewController 容器, 之後由容器內提供一個 Surface 給 Flutter Engine 使用者繪製。
所以 Flutter 中控制元件的渲染堆疊是獨立的，沒辦法和原生平臺直接混合使用，這時候為了能夠在 Flutter 中插入原生平臺的部分功能，Flutter 除了提供了 PlatformView 這樣的實現邏輯之外，還提供了 Texture作為 外接紋理的支援。
如上圖所示，在《Flutter 完整實戰詳解》 中介紹過，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 #23913 和 #13238 中有提及，這裡可能需要自己多實現一個原生介面進行相容，當然在 auto_orientation 或者 orientation 等第三方庫也進行了這方面的相容。
另外 iOS 的頁面旋轉還確定是否開啟了旋轉配置的開關。
資源推薦
- 本文 Demo ： flutter_video_full_controller
- Github ： github.com/CarGuo
- 開源 Flutter 完整專案：github.com/CarGuo/GSYG…
- 開源 Flutter 多案例學習型專案: github.com/CarGuo/GSYF…
- 開源 Fluttre 實戰電子書專案：github.com/CarGuo/GSYF…
- 開源 React Native 專案：github.com/CarGuo/GSYG…
