Flutter视频播放封装历程

本文基于官方视频播放plugin进行封装
https://github.com/flutter/plugins/tree/master/packages/video_player/video_player

在日常的开发中，难免会遇到视频开发需求；随着Flutter技术日渐活跃所以在所难逃会有视频功能的需求，如果完完整整把官方提供的video_player功能直接搬进来使用会发现在很多地方需要进一步封装。

一、集成视频播放功能
首先，由于公司的Android采用的是ijkplayer来实现视频播放功能而官方的这个插件采用的是exoplayer，所以在集成的时候我们把VideoPlayerPlugin对应的类进行改造把相关的exoplayer换成自家App中的ijkplayer，这样子做的好处不仅仅可以减少因为引入了exoplayer给App带来了更大的包大小，而且也可以复用原生端的代码。

其次，需要大概了解一些官方的视频播放插件原理，而对于原理可以用一句话来概括就是：外接纹理 Texture；
在Flutter端中的Textture类的定义如下：

class Texture extends LeafRenderObjectWidget {
  const Texture({
    Key key,
    @required this.textureId,
  }) : assert(textureId != null),
       super(key: key);
}

所以也就说每一个纹理Textture对应着一个必须的textureId，这就是实现视频播放供的关键点；对于原生如何生成textureId，可以大概看下官方的插件的源码：

TextureRegistry textures = registrar.textures();
TextureRegistry.SurfaceTextureEntry textureEntry = textures.createSurfaceTexture();
textureId = textureEntry.id()

问题1：什么时候生成这个textureId呢？
当我们在Flutter端调用视频初始化的时候，会调用plugin的create方法：

final Map<dynamic, dynamic> response = await _channel.invokeMethod(
  'create',
  dataSourceDescription,
);
_textureId = response['textureId'];

问题2：获取了textureId是如何进行传递数据呢？
当Flutter端调用create的时候，原生端会生成一个textureId并注册了一个新的EventChannel；至此视频播放的相关数据如：initialized(初始化)、completed(播放完成)、bufferingUpdate(进度更新)、bufferingStart(缓冲开始)、bufferingEnd(缓冲结束)就会回调给Flutter端具体的每一个视频Widget，从而实现下一步逻辑。

原生端如何生成一个新的EventChannel：

TextureRegistry.SurfaceTextureEntry textureEntry = textures.createSurfaceTexture();
String eventChannelName = "flutter.io/videoPlayer/videoEvents" + textureEntry.id();
EventChannel eventChannel =
        new EventChannel(
                registrar.messenger(), eventChannelName);

Flutter端如何监听：

void eventListener(dynamic event) {
   final Map<dynamic, dynamic> map = event;
   switch (map['event']) {
     case 'initialized':
       value = value.copyWith(
         duration: Duration(milliseconds: map['duration']),
         size: Size(map['width']?.toDouble() ?? 0.0,
             map['height']?.toDouble() ?? 0.0),
       );
       initializingCompleter.complete(null);
       _applyLooping();
       _applyVolume();
       _applyPlayPause();
       break;
       ......
   }
 }
 void errorListener(Object obj) {
   final PlatformException e = obj;
   LogUtil.d("----------- ErrorListener Code = ${e.code}");
   value = VideoPlayerValue.erroneous(e.code);
   _timer?.cancel();
 }

 _eventSubscription = _eventChannelFor(_textureId)
     .receiveBroadcastStream()
     .listen(eventListener, onError: errorListener);
 return initializingCompleter.future;
}

EventChannel _eventChannelFor(int textureId) {
 return EventChannel('flutter.io/videoPlayer/videoEvents$textureId');
}

当然对于类似暂停/播放/快进...等一些需要触发操作的走的逻辑有点不同；走的是跟调用create方法的同一个plugin(即"flutter.io/videoPlayer"对应的plugin)：

// 如播放/暂停调用方式
final MethodChannel _channel = const MethodChannel('flutter.io/videoPlayer')
_channel.invokeMethod( 'play', <String, dynamic>{'textureId': _textureId});

至此；就可以实现了Flutter的视频播放功能了。

二、视频列表界面实现
在Flutter跟普通的列表式界面一样使用一个ListView这种可滑动的控件即可实现；但是对于视频界面有点不同的是需要处理当当前播放的item不可见的时候需要暂停播放，当点击另一个视频的时候前一个播放中的视频需要暂停。

首先，针对点击另一个视频的时候前一个播放中的视频需要暂停的处理方式：
这种情况还是比较好处理，我这里的处理方式是给每一个视频的Widget都注册一个点击回调，当另一个点击播放的时候遍历回调时发现当前视频处于播放中就执行暂停操作：

/// 控制当点击播放的时候上一个视频需要暂停
playCallback = () {
  if (controller.value.isPlaying) {
    setState(() {
      controller.pause();
    });
  }
};
VideoPlayerController.playCallbacks.add(playCallback);

其次，滑动的时候当item不可见的时候需要停止播放；相对这种情况主要的原理就是获取可滑动视图的Rect(区域)，然后当视频Rect的底部小于可滑动视图的顶部或者当前的视频的视图的顶部小于可滑动视图的底部就执行暂停操作。
问题1：如何获取Widget的Rect呢？

  /// 返回对应的Rect区域...
  static Rect getRectFromKey(BuildContext currentContext) {
    var object = currentContext?.findRenderObject();
    var translation = object?.getTransformTo(null)?.getTranslation();
    var size = object?.semanticBounds?.size;

    if (translation != null && size != null) {
      return new Rect.fromLTWH(translation.x, translation.y, size.width, size.height);
    } else {
      return null;
    }
  }

问题2：如何根据滑动来判断滑出了屏幕呢？
给视频Widget注册一个监听，当滑动的时候进行回调判断：

/// 滑动ListView的时候进行回调给视频Widget
scrollController = ScrollController();
scrollController.addListener(() {
  if (videoScrollController.scrollOffsetCallbacks.isNotEmpty) {
    for (ScrollOffsetCallback callback in videoScrollController.scrollOffsetCallbacks) {
      callback();
    }
  }
});

当视频Widget接收到滑动回调的时候：

scrollOffsetCallback = () {
itemRect = VideoScrollController.getRectFromKey(videoBuildContext);
      /// 状态栏 + 标题栏的高度(存在一点偏差)
      int toolBarAndStatusBarHeight = 44 + 25;
      if (itemRect != null && videoScrollController.rect != null &&
          (itemRect.top > videoScrollController.rect.bottom || itemRect.bottom - toolBarAndStatusBarHeight < videoScrollController.rect.top)) {
        if (controller.value.isPlaying) {
          setState(() {
            LogUtil.d("=============== 正在播放中，被移出屏幕外需要暂停播放 ======");
            controller.pause();
          });
        }
      }
    };
videoScrollController?.scrollOffsetCallbacks?.add(scrollOffsetCallback);

至此，真的列表式视频界面就解决了相关滑动或者点击的时候执行暂停/播放的功能了。

三、全屏切换
对于视频功能很常见的就是全屏的需求，所以在Flutter端自然也是少不了这种功能了；针对全屏的功能参考了开源库https://github.com/brianegan/chewie的思路。
而主要的原理还是利用每个纹理Textture的textureId唯一的原理，跟原生的扣View的方式有一些差别，按照开源库的整体代码还是比较简单没有非常多的麻烦问题：

/// 退出全屏
  _popFullScreenWidget() {
    Navigator.of(context).pop();
  }

/// 切换至全屏状态
  _pushFullScreenWidget() async {
    final TransitionRoute<Null> route = new PageRouteBuilder<Null>(
      settings: new RouteSettings(isInitialRoute: false),
      pageBuilder: _fullScreenRoutePageBuilder,
    );

    SystemChrome.setEnabledSystemUIOverlays([]);
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    await Navigator.of(context).push(route);
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

那么，以上大概就是在Flutter端开发时常见的需求功能了；当然在具体的或者更变态的视频需求时需要基于该方案再进一步完善。
附上几张demo的效果图：

在这里插入图片描述