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.视频视图层级示意图

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
- 如何做到内核无缝切换？
  - 具体的代码案例，以及具体做法，在下一篇博客中会介绍到。或者直接看代码：视频播放器
播放器内核的架构图如下所示

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                     播放状态，主要是指播放器的各种状态*/@Overridepublic 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                   播放模式*/@Overridepublic 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() {@Overridepublic void onAdClick() {BaseToast.showRoundRectToast( "广告点击跳转");}@Overridepublic 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代码介绍

02.视频播放器整体结构相关推荐

万能格式音视频播放器KMPlayer Plus (Divx)_31.02.100Pro版
Pro版由就要分享网91apps.cn的SOLDIER分享,谈到音视频播放器软件,大家一定会记得昔日的王者--KMplayer!对,你没看错,曾经在 Windows 上有着霸主地位的万能格式音视频播放 ...
android视频播放器api,03.视频播放器Api说明
03.视频播放器Api说明目录介绍01.最简单的播放 02.如何切换视频内核 03.切换视频模式 04.切换视频清晰度 05.视频播放监听 06.列表中播放处理 07.悬浮窗口播放 08.其他重要功 ...
一个兼容IE7\IE8,H5的多功能视频播放器,H5视频播放器兼容Flash视频播放器
这里记录一个视频播放器,免费可适当修改:名称:ckplayer视频播放器(免费) 官网地址:http://www.ckplayer.com/ 下载地址:http://www.ckplayer.com/ ...
XBMC源代码分析 7：视频播放器（dvdplayer）-输入流（以libRTMP为例）
前文分析了XBMC的基本结构: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分 ...
XBMC源代码分析 6：视频播放器（dvdplayer）-文件头（以ffmpeg为例）
XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分析 4: ...
XBMC源代码简析 5：视频播放器（dvdplayer）-解复用器（以ffmpeg为例）
XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分析 4: ...
XBMC源代码分析 4：视频播放器（dvdplayer）-解码器（以ffmpeg为例）
XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述本文我们分析XBMC中视 ...
制作统一样式的H5视频播放器
前言之前,忙于考试未来及更新文章.本文适用于掌握JavaScript html css jQuery的基本内容的读者.不知大家有没注意原生的H5视频播放器用不同的浏览器打开所呈现的效果并不一样.而如 ...
【音视频零基础入门 1】视频播放器原理、流媒体协议、封装格式、视频编码、音频编码
[音视频零基础入门 1]视频播放器原理.流媒体协议.封装格式.视频编码一.视频播放器原理 1.1 解协议 1.2 解封装 1.3 解码 1.4 视音频同步二.流媒体协议三.封装格式四.封装格式 ...

02.视频播放器整体结构

02.视频播放器整体结构

目录介绍

00.视频播放器通用框架

01.视频常见的布局视图

02.后期可能涉及的视图

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

04.视频视图层级示意图

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

06.如何创建不同播放器

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

08.交互交给外部开发者

09.关于优先级视图展示

10.代码项目lib代码介绍

02.视频播放器整体结构相关推荐

最新文章

热门文章