02.视频播放器整体结构

02.视频播放器整体结构

目录介绍

• 01.视频常见的布局视图
• 02.后期可能涉及的视图
• 03.需要达到的目的和效果
• 04.视频视图层级示意图
• 05.整体架构思路分析流程
• 06.如何创建不同播放器
• 07.如何友好处理播放器UI
• 08.交互交给外部开发者
• 09.关于优先级视图展示
• 10.代码项目lib代码介绍

00.视频播放器通用框架

• 基础封装视频播放器player，可以在ExoPlayer、MediaPlayer，声网RTC视频播放器内核，原生MediaPlayer可以自由切换
• 对于视图状态切换和后期维护拓展，避免功能和业务出现耦合。比如需要支持播放器UI高度定制，而不是该lib库中UI代码
• 针对视频播放，音频播放，播放回放，以及视频直播的功能。使用简单，代码拓展性强，封装性好，主要是和业务彻底解耦，暴露接口监听给开发者处理业务具体逻辑
• 该播放器整体架构：播放器内核(自由切换) + 视频播放器 + 边播边缓存 + 高度定制播放器UI视图层
• 项目地址：https://github.com/yangchong211/YCVideoPlayer
• 关于视频播放器整体功能介绍文档：https://juejin.im/post/6883457444752654343

01.视频常见的布局视图

• 视频底图(用于显示初始化视频时的封面图)，视频状态视图【加载loading，播放异常，加载视频失败，播放完成等】
• 改变亮度和声音【改变声音视图，改变亮度视图】，改变视频快进和快退，左右滑动快进和快退视图(手势滑动的快进快退提示框)
• 顶部控制区视图(包含返回健，title等)，底部控制区视图(包含进度条，播放暂停，时间，切换全屏等)
• 锁屏布局视图(全屏时展示，其他隐藏)，底部播放进度条视图(很多播放器都有这个)，清晰度列表视图(切换清晰度弹窗)
• 底部播放进度条视图(很多播放器都有这个)，当bottom视图显示时底部进度条隐藏，反之则显示

02.后期可能涉及的视图

• 手势指导页面(有些播放器有新手指导功能)，离线下载的界面(该界面中包含下载列表, 列表的item编辑(全选, 删除))
• 用户从wifi切换到4g网络，提示网络切换弹窗界面(当网络由wifi变为4g的时候会显示)
• 图片广告视图(带有倒计时消失)，开始视频广告视图，非会员试看视图
• 弹幕视图(这个很重要)，水印显示视图，倍速播放界面(用于控制倍速)，底部视频列表缩略图视图
• 投屏视频视图界面，视频直播间刷礼物界面，老师开课界面，展示更多视图(下载，分享，切换音频等)

03.需要达到的目的和效果

• 基础封装视频播放器player，可以在ExoPlayer、MediaPlayer，声网RTC视频播放器内核，原生MediaPlayer可以自由切换
• 对于视图状态切换和后期维护拓展，避免功能和业务出现耦合。比如需要支持播放器UI高度定制，而不是该lib库中UI代码
• 针对视频播放，音频播放，播放回放，以及视频直播的功能。使用简单，代码拓展性强，封装性好，主要是和业务彻底解耦，暴露接口监听给开发者处理业务具体逻辑

04.视频视图层级示意图

image

05.整体架构思路分析流程

• 播放器内核
  • 可以切换ExoPlayer、MediaPlayer，IjkPlayer，声网视频播放器，这里使用工厂模式Factory + AbstractVideoPlayer + 各个实现AbstractVideoPlayer抽象类的播放器类
  • 定义抽象的播放器，主要包含视频初始化，设置，状态设置，以及播放监听。由于每个内核播放器api可能不一样，所以这里需要实现AbstractVideoPlayer抽象类的播放器类，方便后期统一调用
  • 为了方便创建不同内核player，所以需要创建一个PlayerFactory，定义一个createPlayer创建播放器的抽象方法，然后各个内核都实现它，各自创建自己的播放器
• VideoPlayer播放器
  • 可以自由切换视频内核，Player+Controller。player负责播放的逻辑，Controller负责视图相关的逻辑，两者之间用接口进行通信
  • 针对Controller，需要定义一个接口，主要负责视图UI处理逻辑，支持添加各种自定义视图View【统一实现自定义接口Control】，每个view尽量保证功能单一性，最后通过addView形式添加进来
  • 针对Player，需要定义一个接口，主要负责视频播放处理逻辑，比如视频播放，暂停，设置播放进度，设置视频链接，切换播放模式等操作。需要注意把Controller设置到Player里面，两者之间通过接口交互
• UI控制器视图
  • 定义一个BaseVideoController类，这个主要是集成各种事件的处理逻辑，比如播放器状态改变，控制视图隐藏和显示，播放进度改变，锁定状态改变，设备方向监听等等操作
  • 定义一个view的接口InterControlView，在这里类里定义绑定视图，视图隐藏和显示，播放状态，播放模式，播放进度，锁屏等操作。这个每个实现类则都可以拿到这些属性呢
  • 在BaseVideoController中使用LinkedHashMap保存每个自定义view视图，添加则put进来后然后通过addView将视图添加到该控制器中，这样非常方便添加自定义视图
  • 播放器切换状态需要改变Controller视图，比如视频异常则需要显示异常视图view，则它们之间的交互是通过ControlWrapper(同时实现Controller接口和Player接口)实现

06.如何创建不同播放器

• 目标要求
  • 基础播放器封装了包含ExoPlayer、MediaPlayer，ijkPlayer，声网视频播放器等
  • 可以自由切换初始化任何一种视频播放器，比如通过构造传入类型参数来创建不同的视频播放器

  PlayerFactory playerFactory = IjkPlayerFactory.create();
  IjkVideoPlayer ijkVideoPlayer = (IjkVideoPlayer) playerFactory.createPlayer(this);
  PlayerFactory playerFactory = ExoPlayerFactory.create();
  ExoMediaPlayer exoMediaPlayer = (ExoMediaPlayer) playerFactory.createPlayer(this);
  PlayerFactory playerFactory = MediaPlayerFactory.create();
  AndroidMediaPlayer androidMediaPlayer = (AndroidMediaPlayer) playerFactory.createPlayer(this);
  

• 使用那种形式创建播放器
  • 工厂模式
    • 隐藏内核播放器创建具体细节，开发者只需要关心所需产品对应的工厂，无须关心创建细节即可创建播放器。符合开闭原则
  • 适配器模式
    • 这个也是事后补救模式，但是在该库中，没有尝试这种方式。https://www.runoob.com/design-pattern/adapter-pattern.html
  • 如何做到内核无缝切换？
    • 具体的代码案例，以及具体做法，在下一篇博客中会介绍到。或者直接看代码：视频播放器
• 播放器内核的架构图如下所示
  • image

07.如何友好处理播放器UI

• 发展中遇到的问题
  • 播放器可支持多种场景下的播放，多个产品会用到同一个播放器，这样就会带来一个问题，一个播放业务播放器状态发生变化，其他播放业务必须同步更新播放状态，各个播放业务之间互相交叉，随着播放业务的增多，开发和维护成本会急剧增加, 导致后续开发不可持续。
• 播放器内核和UI层耦合
  • 也就是说视频player和ui操作柔和到了一起，尤其是两者之间的交互。比如播放中需要更新UI进度条，播放异常需要显示异常UI，都比较难处理播放器状态变化更新UI操作
• UI难以自定义或者修改麻烦
  • 比如常见的视频播放器，会把视频各种视图写到xml中，这种方式在后期代码会很大，而且改动一个小的布局，则会影响大。这样到后期往往只敢加代码，而不敢删除代码……
  • 有时候难以适应新的场景，比如添加一个播放广告，老师开课，或者视频引导业务需求，则需要到播放器中写一堆业务代码。迭代到后期，违背了开闭原则，视频播放器需要做到和业务分离
• 视频播放器结构需要清晰
  • 这个是指该视频播放器能否看了文档后快速上手，知道封装的大概流程。方便后期他人修改和维护，因此需要将视频播放器功能分离。比如切换内核+视频播放器(player+controller+view)
• 一定要解耦合
  • 播放器player与视频UI解耦：支持添加自定义视频视图，比如支持添加自定义广告，新手引导，或者视频播放异常等视图，这个需要较强的拓展性
• 适合多种业务场景
  • 比如适合播放单个视频，多个视频，以及列表视频，或者类似抖音那种一个页面一个视频，还有小窗口播放视频。也就是适合大多数业务场景
• 具体操作
  • 播放状态变化是导致不同播放业务场景之间交叉同步，解除播放业务对播放器的直接操控，采用接口监听进行解耦。比如：player+controller+interface
  • 具体的代码案例，以及具体做法，在下一篇博客中会介绍到。或者直接看代码：视频播放器

08.交互交给外部开发者

• 在播放器中，很重要一个就是需要把播放器player的播放模式(小屏幕，正常，全屏模式)，以及播放状态(播放，暂停，异常，完成，加载，缓冲等多种状态)暴露给控制层view，方便做UI更新。
• 比如外部开发者想加一个广告视图，这个时候肯定需要给它播放器的状态
  • 添加了自定义播放器视图，比如添加视频广告，可以选择跳过，选择播放暂停。那这个视图view，肯定是需要操作player或者获取player的状态的。这个时候就需要暴露监听视频播放的状态接口监听
  • 首先定义一个InterControlView接口，也就是说所有自定义视频视图view需要实现这个接口，该接口中的核心方法有：绑定视图到播放器，视图显示隐藏变化监听，播放状态监听，播放模式监听，进度监听，锁屏监听等
  • 在BaseVideoController中的状态监听中，通过InterControlView接口对象就可以把播放器的状态传递到子类中
• 举一个代码的例子
  • 比如，现在有个业务需求，需要在视频播放器刚开始添加一个广告视图，等待广告倒计时120秒后，直接进入播放视频逻辑。相信这个业务场景很常见，大家都碰到过，使用该播放器就特别简单，代码如下所示：
  • 首先创建一个自定义view，需要实现InterControlView接口，重写该接口中所有抽象方法，这里省略了很多代码，具体看demo。

  public class AdControlView extends FrameLayout implements InterControlView, View.OnClickListener {
  
      private ControlWrapper mControlWrapper;
      public AdControlView(@NonNull Context context) {
          super(context);
          init(context);
      }
  
      private void init(Context context){
          LayoutInflater.from(getContext()).inflate(R.layout.layout_ad_control_view, this, true);
      }
     
      /**
       * 播放状态
       * -1               播放错误
       * 0                播放未开始
       * 1                播放准备中
       * 2                播放准备就绪
       * 3                正在播放
       * 4                暂停播放
       * 5                正在缓冲(播放器正在播放时，缓冲区数据不足，进行缓冲，缓冲区数据足够后恢复播放)
       * 6                暂停缓冲(播放器正在播放时，缓冲区数据不足，进行缓冲，此时暂停播放器，继续缓冲，缓冲区数据足够后恢复暂停
       * 7                播放完成
       * 8                开始播放中止
       * @param playState                     播放状态，主要是指播放器的各种状态
       */
      @Override
      public void onPlayStateChanged(int playState) {
          switch (playState) {
              case ConstantKeys.CurrentState.STATE_PLAYING:
                  mControlWrapper.startProgress();
                  mPlayButton.setSelected(true);
                  break;
              case ConstantKeys.CurrentState.STATE_PAUSED:
                  mPlayButton.setSelected(false);
                  break;
          }
      }
  
      /**
       * 播放模式
       * 普通模式，小窗口模式，正常模式三种其中一种
       * MODE_NORMAL              普通模式
       * MODE_FULL_SCREEN         全屏模式
       * MODE_TINY_WINDOW         小屏模式
       * @param playerState                   播放模式
       */
      @Override
      public void onPlayerStateChanged(int playerState) {
          switch (playerState) {
              case ConstantKeys.PlayMode.MODE_NORMAL:
                  mBack.setVisibility(GONE);
                  mFullScreen.setSelected(false);
                  break;
              case ConstantKeys.PlayMode.MODE_FULL_SCREEN:
                  mBack.setVisibility(VISIBLE);
                  mFullScreen.setSelected(true);
                  break;
          }
          //暂未实现全面屏适配逻辑，需要你自己补全
      }
  }
  

  • 然后该怎么使用这个自定义view呢？很简单，在之前基础上，通过控制器对象add进来即可，代码如下所示

  controller = new BasisVideoController(this);
  AdControlView adControlView = new AdControlView(this);
  adControlView.setListener(new AdControlView.AdControlListener() {
      @Override
      public void onAdClick() {
          BaseToast.showRoundRectToast( "广告点击跳转");
      }
  
      @Override
      public void onSkipAd() {
          playVideo();
      }
  });
  controller.addControlComponent(adControlView);
  //设置控制器
  mVideoPlayer.setController(controller);
  mVideoPlayer.setUrl(proxyUrl);
  mVideoPlayer.start();
  

09.关于优先级视图展示

• 视频播放器为了拓展性，需要暴露view接口供外部开发者自定义视频播放器视图，通过addView的形式添加到播放器的控制器中。
  • 这就涉及view视图的层级性。控制view视图的显示和隐藏是特别重要的，这个时候在自定义view中就需要拿到播放器的状态
• 举一个简单的例子，基础视频播放器
  • 添加了基础播放功能的几个播放视图。有播放完成，播放异常，播放加载，顶部标题栏，底部控制条栏，锁屏，以及手势滑动栏。如何控制它们的显示隐藏切换呢？
  • 在addView这些视图时，大多数的view都是默认GONE隐藏的。比如当视频初始化时，先缓冲则显示缓冲view而隐藏其他视图，接着播放则显示顶部/底部视图而隐藏其他视图
• 比如有时候需要显示两种不同的自定义视图如何处理
  • 举个例子，播放的时候，点击一下视频，会显示顶部title视图和底部控制条视图，那么这样会同时显示两个视图。
  • 点击顶部title视图的返回键可以关闭播放器，点击底部控制条视图的播放暂停可以控制播放条件。这个时候底部控制条视图FrameLayout的ChildView在整个视频的底部，顶部title视图FrameLayout的ChildView在整个视频的顶部，这样可以达到上下层都可以相应事件。
• 那么FrameLayout层层重叠，如何让下层不响应事件
  • 在最上方显示的层加上： android:clickable="true" 可以避免点击上层触发底层。或者直接给控制设置一个background颜色也可以。

10.代码项目lib代码介绍

image

image

image

image