杨充
TA的个人档案
杨充个人页面-阿里云开发者社区
文章
103
问答
0
个人介绍
从事Android开发，个人独立开发的项目有：投资界，新芽 爱好钻研技术，喜欢写博客，热爱开源的精神。目前GitHub开源项目有30个左右，star已经超过2千…… 喜欢跑步，看书，写作……
擅长的技术
- Java
- Python
- 前端开发
- 容器
- 高分内容
- 最新动态
- 文章
- 问答
-
发表了文章 2021-08-19
Flutter如何状态管理
目录介绍01.什么是状态管理02.状态管理方案分类03.状态管理使用场景04.Widget管理自己的状态05.Widget管理子Widget状态06.简单混合管理状态07.全局状态如何管理08.Provider使用方法09.订阅监听修改状态推荐fluter Utils 工具类库：https://github.com/yangchong211/YCFlutterUtilsflutter 混合项目代码案例：https://github.com/yangchong211/YCHybridFlutter01.什么是状态管理响应式的编程框架中都会有一个永恒的主题——“状态(State)管理”在Flutter中，想一个问题，StatefulWidget的状态应该被谁管理？Widget本身？父Widget？都会？还是另一个对象？答案是取决于实际情况！以下是管理状态的最常见的方法：Widget管理自己的状态。Widget管理子Widget状态。混合管理（父Widget和子Widget都管理状态）。不同模块的状态管理。如何决定使用哪种管理方法？下面给出的一些原则可以帮助你做决定：如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父Widget管理。如果状态是有关界面外观效果的，例如颜色、动画，那么状态最好由Widget本身来管理。如果某一个状态是不同Widget共享的则最好由它们共同的父Widget管理。如果是多个模块需要公用一个状态，那么该怎么处理呢，那可以用Provider。如果修改了某一个属性，需要刷新多个地方数据。比如修改用户城市id数据，那么则刷新首页n处的接口数据，这个时候可以用订阅监听修改状态02.状态管理方案分类setState状态管理优点：简单场景下特别适用，逻辑简单，易懂易实现所见即所得，效率比较高缺点逻辑与视图耦合严重，复杂逻辑下可维护性很差数据传输基于依赖传递，层级较深情况下不易维护，可读性差InheritedWidget状态管理优点方便数据传输，可以基于InheritedWidget达到逻辑和视图解耦的效果flutter内嵌类，基础且稳定，无代码侵入缺点属于比较基础的类，友好性不如封装的第三方库对于性能需要额外注意，刷新范围如果过大会影响性能Provider状态管理优点功能完善，涵盖了ScopedModel和InheritedWidget的所有功能数据逻辑完美融入了widget树中，代码结构清晰，可以管理局部状态和全局状态解决了多model和资源回收的问题对不同场景下使用的provider做了优化和区分支持异步状态管理和provider依赖注入缺点使用不当可能会造成性能问题（大context引起的rebuild）局部状态之前的数据同步不支持订阅监听修改状态有两种：一种是bus事件通知(是一种订阅+观察)，另一个是接口注册回调。接口回调：由于使用了回调函数原理，因此数据传递实时性非常高，相当于直接调用，一般用在功能模块上。bus事件：组件之间的交互，很大程度上降低了它们之间的耦合，使得代码更加简洁，耦合性更低，提升我们的代码质量。03.状态管理使用场景setState状态管理适合Widget管理自己的状态，这种很常见，调用setState刷新自己widget改变状态。适合Widget管理子Widget状态，这种也比较常见。不过这种关联性比较强。04.Widget管理自己的状态_TapboxAState 类:管理TapboxA的状态。定义_active：确定盒子的当前颜色的布尔值。定义_handleTap()函数，该函数在点击该盒子时更新_active，并调用setState()更新UI。实现widget的所有交互式行为。代码如下// TapboxA 管理自身状态. //------------------------- TapboxA ---------------------------------- class TapboxA extends StatefulWidget { TapboxA({Key key}) : super(key: key); @override _TapboxAState createState() => new _TapboxAState(); } class _TapboxAState extends State<TapboxA> { bool _active = false; void _handleTap() { setState(() { _active = !_active; }); } Widget build(BuildContext context) { return new GestureDetector( onTap: _handleTap, child: new Container( child: new Center( child: new Text( _active ? 'Active' : 'Inactive', style: new TextStyle(fontSize: 32.0, color: Colors.white), ), ), width: 200.0, height: 200.0, decoration: new BoxDecoration( color: _active ? Colors.lightGreen[700] : Colors.grey[600], ), ), ); } }05.Widget管理子Widget状态先看一下下面这些是什么typedef ValueChanged<T> = void Function(T value);对于父Widget来说，管理状态并告诉其子Widget何时更新通常是比较好的方式。例如，IconButton是一个图标按钮，但它是一个无状态的Widget，因为我们认为父Widget需要知道该按钮是否被点击来采取相应的处理。在以下示例中，TapboxB通过回调将其状态导出到其父组件，状态由父组件管理，因此它的父组件为StatefulWidget。ParentWidgetState 类:为TapboxB 管理_active状态。实现_handleTapboxChanged()，当盒子被点击时调用的方法。当状态改变时，调用setState()更新UI。TapboxB 类:继承StatelessWidget类，因为所有状态都由其父组件处理。当检测到点击时，它会通知父组件。// ParentWidget 为 TapboxB 管理状态. class ParentWidget extends StatefulWidget { @override _ParentWidgetState createState() => new _ParentWidgetState(); } class _ParentWidgetState extends State<ParentWidget> { bool _active = false; void _handleTapboxChanged(bool newValue) { setState(() { _active = newValue; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Widget管理子Widget状态"), ), body: new ListView( children: [ new Text("Widget管理子Widget状态"), new TapboxB( active: _active, onChanged: _handleTapboxChanged, ), ], ), ); } } //------------------------- TapboxB ---------------------------------- class TapboxB extends StatefulWidget{ final bool active; final ValueChanged<bool> onChanged; TapboxB({Key key , this.active : false ,@required this.onChanged }); @override State<StatefulWidget> createState() { return new TabboxBState(); } } class TabboxBState extends State<TapboxB>{ void _handleTap() { widget.onChanged(!widget.active); } @override Widget build(BuildContext context) { return new GestureDetector( onTap: _handleTap, child: new Container( child: new Center( child: new Text( widget.active ? 'Active' : 'Inactive', ), ), width: 100, height: 100, decoration: new BoxDecoration( color: widget.active ? Colors.lightGreen[700] : Colors.grey[850], ), ), ); } }06.简单混合管理状态对于一些组件来说，混合管理的方式会非常有用。在这种情况下，组件自身管理一些内部状态，而父组件管理一些其他外部状态。在下面TapboxC示例中手指按下时，盒子的周围会出现一个深绿色的边框，抬起时，边框消失。点击完成后，盒子的颜色改变。TapboxC将其_active状态导出到其父组件中，但在内部管理其_highlight状态。这个例子有两个状态对象_ParentWidgetState和_TapboxCState。_ParentWidgetStateC 类:管理_active 状态。实现 _handleTapboxChanged() ，当盒子被点击时调用。当点击盒子并且_active状态改变时调用setState()更新UI。_TapboxCState 对象:管理_highlight 状态。GestureDetector监听所有tap事件。当用户点下时，它添加高亮（深绿色边框）；当用户释放时，会移除高亮。当按下、抬起、或者取消点击时更新_highlight状态，调用setState()更新UI。当点击时，将状态的改变传递给父组件。//---------------------------- ParentWidget ---------------------------- class ParentWidgetC extends StatefulWidget { @override _ParentWidgetCState createState() => new _ParentWidgetCState(); } class _ParentWidgetCState extends State<ParentWidgetC> { bool _active = false; void _handleTapboxChanged(bool newValue) { setState(() { _active = newValue; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("简单混合管理状态"), ), body: new Container( child: new ListView( children: [ new Text("_ParentWidgetCState状态管理"), new Padding(padding: EdgeInsets.all(10)), new Text( _active ? 'Active' : 'Inactive', ), new Padding(padding: EdgeInsets.all(10)), new Text("_TapboxCState状态管理"), new TapboxC( active: _active, onChanged: _handleTapboxChanged, ) ], ), ), ); } } //----------------------------- TapboxC ------------------------------ class TapboxC extends StatefulWidget { TapboxC({Key key, this.active: false, @required this.onChanged}) : super(key: key); final bool active; final ValueChanged<bool> onChanged; @override _TapboxCState createState() => new _TapboxCState(); } class _TapboxCState extends State<TapboxC> { bool _highlight = false; void _handleTapDown(TapDownDetails details) { setState(() { _highlight = true; }); } void _handleTapUp(TapUpDetails details) { setState(() { _highlight = false; }); } void _handleTapCancel() { setState(() { _highlight = false; }); } void _handleTap() { widget.onChanged(!widget.active); } @override Widget build(BuildContext context) { // 在按下时添加绿色边框，当抬起时，取消高亮 return new GestureDetector( onTapDown: _handleTapDown, // 处理按下事件 onTapUp: _handleTapUp, // 处理抬起事件 onTap: _handleTap, onTapCancel: _handleTapCancel, child: new Container( child: new Center( child: new Text(widget.active ? 'Active' : 'Inactive', style: new TextStyle(fontSize: 32.0, color: Colors.white)), ), width: 200.0, height: 200.0, decoration: new BoxDecoration( color: widget.active ? Colors.lightGreen[700] : Colors.grey[600], border: _highlight ? new Border.all( color: Colors.teal[700], width: 10.0, ) : null, ), ), ); } }07.全局状态如何管理当应用中需要一些跨组件（包括跨路由）的状态需要同步时，上面介绍的方法便很难胜任了。比如，我们有一个设置页，里面可以设置应用的语言，我们为了让设置实时生效，我们期望在语言状态发生改变时，APP中依赖应用语言的组件能够重新build一下，但这些依赖应用语言的组件和设置页并不在一起，所以这种情况用上面的方法很难管理。这时，正确的做法是通过一个全局状态管理器来处理这种相距较远的组件之间的通信。目前主要有两种办法：1.实现一个全局的事件总线，将语言状态改变对应为一个事件，然后在APP中依赖应用语言的组件的initState 方法中订阅语言改变的事件。当用户在设置页切换语言后，我们发布语言改变事件，而订阅了此事件的组件就会收到通知，收到通知后调用setState(...)方法重新build一下自身即可。2.使用一些专门用于状态管理的包，如Provider、Redux，读者可以在pub上查看其详细信息。举一个简答的案例来实践本实例中，使用Provider包来实现跨组件状态共享，因此我们需要定义相关的Provider。需要共享的状态有登录用户信息、APP主题信息、APP语言信息。由于这些信息改变后都要立即通知其它依赖的该信息的Widget更新，所以我们应该使用ChangeNotifierProvider，另外，这些信息改变后都是需要更新Profile信息并进行持久化的。综上所述，我们可以定义一个ProfileChangeNotifier基类，然后让需要共享的Model继承自该类即可，ProfileChangeNotifier定义如下：class ProfileChangeNotifier extends ChangeNotifier { Profile get _profile => Global.profile; @override void notifyListeners() { Global.saveProfile(); //保存Profile变更 super.notifyListeners(); //通知依赖的Widget更新 } }用户状态用户状态在登录状态发生变化时更新、通知其依赖项，我们定义如下：class UserModel extends ProfileChangeNotifier { User get user => _profile.user; // APP是否登录(如果有用户信息，则证明登录过) bool get isLogin => user != null; //用户信息发生变化，更新用户信息并通知依赖它的子孙Widgets更新 set user(User user) { if (user?.login != _profile.user?.login) { _profile.lastLogin = _profile.user?.login; _profile.user = user; notifyListeners(); } } }08.Provider使用方法8.1 正确地初始化 Provider如下所示，create是必须要传递的参数ChangeNotifierProvider( create: (_) => MyModel(), child: ... )实际开发中如何应用builder: (BuildContext context, Widget child) { return MultiProvider(providers: [ ChangeNotifierProvider(create: (context) => BusinessPattern()), ]); },然后看一下BusinessPattern是什么？class BusinessPattern extends ChangeNotifier { PatternState currentState = PatternState.none; void updateBusinessPatternState(PatternState state) { if (currentState.index != state.index) { LogUtils.d('当前模式:$currentState'); LogUtils.d('更新模式:$state'); currentState = state; notifyListeners(); } } }8.2 如何获取Provider取值一种是 Provider.of(context) 比如：Widget build(BuildContext context) { final text = Provider.of<String>(context); return Container(child: Text(text)); }遇到的问题：由于 Provider 会监听 Value 的变化而更新整个 context 上下文，因此如果 build 方法返回的 Widget 过大过于复杂的话，刷新的成本是非常高的。那么我们该如何进一步控制 Widget 的更新范围呢？解决办法：一个办法是将真正需要更新的 Widget 封装成一个独立的 Widget，将取值方法放到该 Widget 内部。Widget build(BuildContext context) { return Container(child: MyText()); } class MyText extends StatelessWidget { @override Widget build(BuildContext context) { final text = Provider.of<String>(context); return Text(text); } }Consumer 是 Provider 的另一种取值方式Consumer 可以直接拿到 context 连带 Value 一并传作为参数传递给 builder ，使用无疑更加方便和直观，大大降低了开发人员对于控制刷新范围的工作成本。Widget getWidget2(BuildContext context) { return Consumer<BusinessPattern>(builder: (context, businessModel, child) { switch (businessModel.currentState) { case PatternState.none: return Text("无模式"); break; case PatternState.normal: return Text("正常模式"); break; case PatternState.small: return Text("小屏模式"); break; case PatternState.overview: return Text("全屏模式"); break; default: return Text("其他模式"); return SizedBox(); } }); }Selector 是 Provider 的另一种取值方式Selector 是 3.1 推出的功能，目的是更近一步的控制 Widget 的更新范围，将监听刷新的范围控制到最小selector：是一个 Function，传入 Value ，要求我们返回 Value 中具体使用到的属性。shouldRebuild：这个 Function 会传入两个值，其中一个为之前保持的旧值，以及此次由 selector 返回的新值，我们就是通过这个参数控制是否需要刷新 builder 内的 Widget。如果不实现 shouldRebuild ，默认会对 pre 和 next 进行深比较（deeply compares）。如果不相同，则返回 true。builder：返回 Widget 的地方，第二个参数 定义的参数，就是我们刚才 selector 中返回的 参数。Widget getWidget4(BuildContext context) { return Selector<BusinessPattern, PatternState>( selector: (context, businessPattern) => businessPattern.currentState, builder: (context, state, child) { switch (state) { case PatternState.none: return Text("无模式"); break; case PatternState.normal: return Text("正常模式"); break; case PatternState.small: return Text("小屏模式"); break; case PatternState.overview: return Text("全屏模式"); break; default: return Text("其他模式"); return SizedBox(); } } );8.3 修改Provider状态如何调用修改状态管理BusinessPatternService _patternService = serviceLocator<BusinessPatternService>(); //修改状态 _patternService.nonePattern(); _patternService.normalPattern();然后看一下normalPattern的具体实现代码class BusinessPatternServiceImpl extends BusinessPatternService { final BuildContext context; BusinessPatternServiceImpl(this.context); PatternState get currentPatternState => _getBusinessPatternState(context).currentState; BusinessPattern _getBusinessPatternState(BuildContext context) { return Provider.of<BusinessPattern>(context, listen: false); } @override void nonePattern() { BusinessPattern _patternState = _getBusinessPatternState(context); _patternState.updateBusinessPatternState(PatternState.none); } @override void normalPattern() { BusinessPattern _patternState = _getBusinessPatternState(context); _patternState.updateBusinessPatternState(PatternState.normal); } }8.4 关于Provider刷新状态发生变化后，widget只会重新build，而不会重新创建（重用机制跟key有关，如果key发生变化widget就会重新生成）09.订阅监听修改状态首先定义抽象类。还需要写上具体的实现类typedef LocationDataChangedFunction = void Function(double); abstract class LocationListener { /// 注册数据变化的回调 void registerDataChangedFunction(LocationDataChangedFunction function); /// 移除数据变化的回调 void unregisterDataChangedFunction(LocationDataChangedFunction function); /// 更新数据的变化 void locationDataChangedCallback(double angle); } class LocationServiceCenterImpl extends LocationListener { List<LocationDataChangedFunction> _locationDataChangedFunction = List(); @override void locationDataChangedCallback(double angle) { _locationDataChangedFunction.forEach((function) { function.call(angle); }); } @override void registerDataChangedFunction(LocationDataChangedFunction function) { _locationDataChangedFunction.add(function); } @override void unregisterDataChangedFunction(LocationDataChangedFunction function) { _locationDataChangedFunction.remove(function); } }那么如何使用呢？在需要用的页面添加接口回调监听_locationListener.registerDataChangedFunction(_onDataChange); void _onDataChange(double p1) { //监听回调处理 }那么如何发送事件，这个时候LocationListener _locationListener = locationService(); _locationListener.locationDataChangedCallback(520.0);fluter Utils 工具类库：https://github.com/yangchong211/YCFlutterUtilsflutter 混合项目代码案例：https://github.com/yangchong211/YCHybridFlutter
-
发表了文章 2020-10-16
04.视频播放器通用架构实践
04.视频播放器通用架构实践 目录介绍 01.视频播放器的痛点 02.业务需求的目标 03.该播放器框架特点 04.播放器内核封装 05.播放器UI层封装 06.如何简单使用 07.如何自定义播放器 08.该案例的拓展性分享 09.关于视频缓存方案 10.如何监控视频埋点 11.待实现的需求分析 12.一些细节上优化 13.参考案例和博客记录 00.视频播放器通用框架 基础封装视频播放器player，可以在ExoPlayer、MediaPlayer，声网RTC视频播放器内核，原生MediaPlayer可以自由切换 对于视图状态切换和后期维护拓展，避免功能和业务出现耦合。比如需要支持播放器UI高度定制，而不是该lib库中UI代码 针对视频播放，音频播放，播放回放，以及视频直播的功能。使用简单，代码拓展性强，封装性好，主要是和业务彻底解耦，暴露接口监听给开发者处理业务具体逻辑 该播放器整体架构：播放器内核(自由切换) + 视频播放器 + 边播边缓存 + 高度定制播放器UI视图层 项目地址：https://github.com/yangchong211/YCVideoPlayer 关于视频播放器整体功能介绍文档：https://juejin.im/post/6883457444752654343 关于视频播放器通用架构实践： 01.视频播放器的痛点 播放器内核难以切换 不同的视频播放器内核，由于api不一样，所以难以切换操作。要是想兼容内核切换，就必须自己制定一个视频接口+实现类的播放器 播放器内核和UI层耦合 也就是说视频player和ui操作柔和到了一起，尤其是两者之间的交互。比如播放中需要更新UI进度条，播放异常需要显示异常UI，都比较难处理播放器状态变化更新UI操作 UI难以自定义或者修改麻烦 比如常见的视频播放器，会把视频各种视图写到xml中，这种方式在后期代码会很大，而且改动一个小的布局，则会影响大。这样到后期往往只敢加代码，而不敢删除代码…… 有时候难以适应新的场景，比如添加一个播放广告，老师开课，或者视频引导业务需求，则需要到播放器中写一堆业务代码。迭代到后期，违背了开闭原则，视频播放器需要做到和业务分离 视频播放器结构不清晰 这个是指该视频播放器能否看了文档后快速上手，知道封装的大概流程。方便后期他人修改和维护，因此需要将视频播放器功能分离。比如切换内核+视频播放器(player+controller+view) 播放器播放和业务耦合 比如多个app共用一个视频播放器组件，一个播放业务播放器状态发生变化，其他播放业务必须同步更新播放状态，各个播放业务之间互相交叉，随着播放业务的增多，开发和维护成本会急剧增加, 导致后续开发不可持续。 02.业务需求的目标 常见的业务需求 基础封装视频播放器player，可以在ExoPlayer、MediaPlayer，声网RTC视频播放器内核，原生MediaPlayer可以自由切换 对于视图状态切换和后期维护拓展，避免功能和业务出现耦合。比如需要支持播放器UI高度定制，而不是该lib库中UI代码 针对视频播放，音频播放，播放回放，以及视频直播的功能。使用简单，代码拓展性强，封装性好，主要是和业务彻底解耦，暴露接口监听给开发者处理业务具体逻辑 音视频播放框架 视频播放等于MediaPlayer和SurfaceView，MediaPlayer主要用于播放音频，没有提供图像输出界面，所以我们需要借助其他的组件来显示MediaPlayer播放的图像输出，我们可以使用SurfaceView来显示 能否实践开发出一套音视频播放的通用架构，能支持音频播放场景，也能播放视频场景，还可以无缝切换。比如视频切换音频操作，增强库的功能性 视频窗口、音频窗口、视频浮窗、音频浮窗、短视频窗口、短视频浮窗、音频控制台等多种场景播放，需要灵活切换，这个也是一个大的难点 03.该播放器框架特点 一定要解耦合 播放器内核与播放器解耦: 支持更多的播放场景、以及新的播放业务快速接入，并且不影响其他播放业务，比如后期添加阿里云播放器内核，或者腾讯播放器内核 播放器player与视频UI解耦：支持添加自定义视频视图，比如支持添加自定义广告，新手引导，或者视频播放异常等视图，这个需要较强的拓展性 适合多种业务场景 比如适合播放单个视频，多个视频，以及列表视频，或者类似抖音那种一个页面一个视频，还有小窗口播放视频。也就是适合大多数业务场景 播放器的整体层级图 播放器架构的介绍 基础内核播放库：提供基础的播放功能，可以自由切换内核，也方便拓展添加其他sdk内核播放器 统一播放器：屏蔽底层内核播放器播放差异，根据协议为上层提供统一的播放能力接口，供上层调用 播放视图层：负责播放器视图层的UI控制和调度，彻底解除播放业务与播放器的耦合 播放场景业务：负责向用户展示音视频播放能力和交互的业务 播放关联业务: 为播放器提供增值或支撑的业务，比如视频埋点统计，后期添加投屏，后期添加下载功能 demo：提供各种播放场景案例代码，基本上有大多数常用播放器的使用场景，建议直接看demo拿来即用 04.播放器内核封装 4.0 遇到的问题 播放器内核拓展难 不同的播放SDK提供的API都不一样，如果业务层对每个合作方都进行业务开发，就会导致业务量非常庞大，并且不同合作的方的播放SDK会产生交叉，不利于播放业务的维护和拓展。 播放器内核难以切换 不同的视频播放器内核，由于api不一样，所以难以切换操作。要是想兼容内核切换，就必须自己制定一个视频接口+实现类的播放器 4.1 视频播放器内核封装需求 一定要解耦合 播放器内核与播放器解耦: 支持更多的播放场景、以及新的播放业务快速接入，并且不影响其他播放业务，比如后期添加阿里云播放器内核，或者腾讯播放器内核 传入不同类型方便创建不同内核 隐藏内核播放器创建具体细节，开发者只需要关心所需产品对应的工厂，无须关心创建细节，甚至无须知道具体播放器类的类名。需要符合开闭原则 具体设计方案 设计统一播放协议，对于上层播放业务，只调用按照统一协议设计接口，不必关心底层播放器的设计逻辑。保证上层播放业务不随新的接入播放SDK发生变化。 4.2 播放器内核架构图 播放器内核架构图 播放器内核代码说明 4.3 如何兼容不同内核播放器 提问：针对不同内核播放器，比如谷歌的ExoPlayer，B站的IjkPlayer，还有原生的MediaPlayer，有些api不一样，那使用的时候如何统一api呢？ 比如说，ijk和exo的视频播放listener监听api就完全不同，这个时候需要做兼容处理 定义接口，然后各个不同内核播放器实现接口，重写抽象方法。调用的时候，获取接口对象调用api，这样就可以统一Api 播放器内核 可以切换ExoPlayer、MediaPlayer，IjkPlayer，声网视频播放器，这里使用工厂模式Factory + AbstractVideoPlayer + 各个实现AbstractVideoPlayer抽象类的播放器类 定义抽象的播放器，主要包含视频初始化，设置，状态设置，以及播放监听。由于每个内核播放器api可能不一样，所以这里需要实现AbstractVideoPlayer抽象类的播放器类，方便后期统一调用 为了方便创建不同内核player，所以需要创建一个PlayerFactory，定义一个createPlayer创建播放器的抽象方法，然后各个内核都实现它，各自创建自己的播放器 关于AbstractVideoPlayer接口详细说明。这个接口定义通用视频播放器方法，比如常见的有：视频初始化，设置url，加载，以及播放状态，简单来说可以分为三个部分。 第一部分：视频初始化实例对象方法，主要包括：initPlayer初始化视频，setDataSource设置视频播放器地址，setSurface设置视频播放器渲染view，prepareAsync开始准备播放操作 第二部分：视频播放器状态方法，主要包括：播放，暂停，恢复，重制，设置进度，释放资源，获取进度，设置速度，设置音量 第三部分：player绑定view后，需要监听播放状态，比如播放异常，播放完成，播放准备，播放size变化，还有播放准备 播放器的核心实现要点 针对上层播放器业务，该内核库提供统一的播放暂停，设置播放状态的接口，由于播放器内核和播放器业务解耦合，所以非常方便快速添加其他sdk播放器，具体可以看这篇文章：05.视频播放器内核切换封装 05.播放器UI层封装 5.1 实际开发遇到问题 发展中遇到的问题 播放器可支持多种场景下的播放，多个产品会用到同一个播放器，这样就会带来一个问题，一个播放业务播放器状态发生变化，其他播放业务必须同步更新播放状态，各个播放业务之间互相交叉，随着播放业务的增多，开发和维护成本会急剧增加, 导致后续开发不可持续。 不太好适合多种业务场景 比如适合播放单个视频，多个视频，以及列表视频，或者类似抖音那种一个页面一个视频，还有小窗口播放视频。也就是适合大多数业务场景，视频通用性需要尽可能完善 5.2 如何分离播放和UI分离 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.播放器UI抽取封装 5.3 关于优先级视图展示 视频播放器为了拓展性，需要暴露view接口供外部开发者自定义视频播放器视图，通过addView的形式添加到播放器的控制器中。 这就涉及view视图的层级性。控制view视图的显示和隐藏是特别重要的，这个时候在自定义view中就需要拿到播放器的状态 举一个简单的例子，基础视频播放器 添加了基础播放功能的几个播放视图。有播放完成，播放异常，播放加载，顶部标题栏，底部控制条栏，锁屏，以及手势滑动栏。如何控制它们的显示隐藏切换呢？ 在addView这些视图时，大多数的view都是默认GONE隐藏的。比如当视频初始化时，先缓冲则显示缓冲view而隐藏其他视图，接着播放则显示顶部/底部视图而隐藏其他视图 比如有时候需要显示两种不同的自定义视图如何处理 举个例子，播放的时候，点击一下视频，会显示顶部title视图和底部控制条视图，那么这样会同时显示两个视图。 点击顶部title视图的返回键可以关闭播放器，点击底部控制条视图的播放暂停可以控制播放条件。这个时候底部控制条视图FrameLayout的ChildView在整个视频的底部，顶部title视图FrameLayout的ChildView在整个视频的顶部，这样可以达到上下层都可以相应事件。 那么FrameLayout层层重叠，如何让下层不响应事件 在最上方显示的层加上： android:clickable="true" 可以避免点击上层触发底层。或者直接给控制设置一个background颜色也可以。 5.4 视频播放器重力感应监听 区别视频几种不同的播放模式 正常播放时，设置检查系统是否开启自动旋转，打开监听；全屏模式播放视频的时候，强制监听设备方向；在小窗口模式播放视频的时候，取消重力感应监听 注意一点。关于是否开启自动旋转的重力感应监听，可以给外部开发者暴露一个方法设置的开关。让用户选择是否开启该功能 具体怎么操作 写一个类，然后继承OrientationEventListener类，注意视频播放器重力感应监听不要那么频繁。表示500毫秒才检测一次…… mOrientationHelper.enable();表示检查系统是否开启自动旋转。mOrientationHelper.disable();表示取消监听 具体可以看这篇博客：06.播放器UI抽取封装 06.如何简单使用 6.1 播放单个视频 必须需要的四步骤代码如下所示 //创建基础视频播放器，一般播放器的功能 BasisVideoController controller = new BasisVideoController(this); //设置控制器 mVideoPlayer.setVideoController(controller); //设置视频播放链接地址 mVideoPlayer.setUrl(url); //开始播放 mVideoPlayer.start(); 只需要四步操作即可，非常简单。这样就可以满足一个基础的视频播放器 具体逻辑可以看：BasisVideoController 如何添加只定义视图，非常方便。AdControlView需要实现InterControlView接口才可以 AdControlView adControlView = new AdControlView(this); controller.addControlComponent(adControlView); 要是一个页面播放多个视频怎么办 直接创建两个VideoPlayer，实现代码和播放单个视频一样，只是需要注意：不要开启音频焦点监听。 如果是开启的音频焦点改变监听，那么播放该视频的时候，就会停止其他音视频的播放操作。类似，你听音乐，这个时候去看视频，那么音乐就暂停呢 6.2 列表播放视频 关于列表播放视频，该案例支持 列表页面有多个item 第一种：点击item播放，当item滑动到不可见时暂停播放；点击其他可见item播放视频，则会暂停其他正在播放的视频，也就是说一次只能播放一个视频 第二种：滑动item，用户不用点击，让其自动进行播放，这种业务场景在玩手机碰到过。大概思路时，进入列表自动播放第一个，然后在RecyclerView滑动监听的方法中，判断如果页面滑动停止了，则遍历RecyclerView子控件找到第一个完全可见的item，然后拿到该item的索引即可播放该位置的视频 列表页面是一个页面一个item 第一种操作使用ViewPager，是垂直方向可以滚动的VerticalViewPager + PagerAdapter，这种方式在item创建上可以设置预加载加载布局视图 第二种操作使用RecyclerView，是用ScrollPageHelper + RecyclerView，这种方式也可以实现一个页面一个item，一次滑动一个 如何保证在列表中只播放一个视频。两种方案 第一种：每个item放一个VideoPlayer，但是要注意需要用一个单例VideoPlayerManager来保证只有一个VideoPlayer对象，这样就可以保证一次播放一个视频。当ViewHolder中的视图被回收时需要销毁视频资源 第二种：只创建一个VideoPlayer，那个播放就添加到具体的item布局中。比如播放第一个视频就把player对象添加到视图中，点击播放第三个时需要把player从它的父布局中移除后然后再添加到该item的布局中，这样就可以实现 list条目中滑动item不可见就停止视频播放 在列表中播放，可以监听RecyclerView中的item生命周期，有一个AttachedToWindow是绑定item视图，还有一个DetachedFromWindow方法是item离开窗口时调用，在这个里面可以做视频销毁的逻辑。 07.如何自定义播放器 BasisVideoController已经满足基础视频播放器功能 在该控制器中，已经做了相关的初始化操作，比如设置视频可以拖动，根据屏幕方向自动进入/退出全屏，设置滑动调节亮度，音量，进度，默认开启等操作。 快速添加基础视频播放器的模块，包括视频播放完成view，播放异常view，播放top视图view，播放底部控制蓝view，手势滑动视图view等。同时在每一个视图view中可以拿到视频播放器的状态，便于设置UI的操作。 比如在此播放器基础上，添加广告视图view 现在有个业务需求，需要在视频播放器刚开始添加一个广告视图，等待广告倒计时120秒后，直接进入播放视频逻辑。相信这个业务场景很常见，大家都碰到过，使用该播放器就特别简单。 首先创建一个自定义view，需要实现InterControlView接口，重写该接口中所有抽象方法，这里省略了很多代码，具体看demo。最后在调用controller.addControlComponent(adControlView);添加到基础视频播放器，这种方式满足大多数的场景…… 那要是基础播放器不满足UI该怎么办？ 好办，直接仿照BasisVideoController创建一个你自己的控制器，ui想怎么定制你自己决定。比如说你要实现一个小窗口播放视频，那这个时候肯定需要定制，照葫芦画瓢，具体可以看CustomFloatController类。 08.该案例的拓展性分享 可以配置多个内核切换 只需要你在配置的时候，传入不同的类型即可创建不同的播放器内核，十分方便。如果后期你要拓展其他的内核播放器，只需要按照exo的代码案例弄一套即可，十分方便，加入其他内核播放器不会影响到你的业务。 PlayerFactory player = PlayerFactoryUtils.getPlayer(PlayerConstant.PlayerType.TYPE_IJK); 可以配置统一视频埋点监听 避免在每个带有视频的页面activity或者Fragment中添加埋点，而是有播放器框架内部提供一个埋点的接口，外部开发者只需要实现这个接口即可全局埋点视频播放器，非常方便和管理维护，针对接口增加或者删除都是不影响你其他的业务。 开发者可以自由添加自定义视频视图 在封装BaseVideoController控制器的时候，考虑到后期的拓展性，把视频各个视频都是以addView的形式添加进来，使用LinkedHashMap存储这样可以保证顺序。 需要注意的是在这个Controller中，需要把播放器的播放状态，播放模式，播放进度，锁屏等操作给绑定到开发者自定义实现的播放器视图View中。 暴露众多视频操作的方法给开发者 比如给视频设置封面图片，这个时候总不能在播放器内部引入一个Glide，然后加载图片，这样和业务耦合呢。可以把这个设置封面view暴露给开发者，然后设置，这样更好一些。 比如外部开发者想要知道视频播放器的状态，做一些业务上操作，这个时候完全可以通过接口的形式暴露出来，该播放器把视频的播放模式监听，播放状态监听，还有各种视频操作都暴露了方法出来，方便开发者调用。 09.关于视频缓存方案 网络上比较好的项目：https://github.com/danikula/AndroidVideoCache 网络用的HttpURLConnection，文件缓存处理，文件最大限度策略，回调监听处理，断点续传,代理服务等。 但是存在一些问题，比如如下所示 文件的缓存超过限制后没有按照lru算法删除， 处理返回给播放器的http响应头消息，响应头消息的获取处理改为head请求（需服务器支持） 替换网络库为okHttp（因为大部分的项目都是以okHttp为网络请求库的），但是这个改动性比较大 然后看一下怎么使用，超级简单。传入视频url链接，返回一个代理链接，然后就可以呢 HttpProxyCacheServer server = new HttpProxyCacheServer(this); String proxyVideoUrl = server.getProxyUrl(URL_AD); 大概的原理 原始的方式是直接塞播放地址给播放器，它就可以直接播放。现在我们要在中间加一层本地代理，播放器播放的时候（获取数据）是通过我们的本地代理的地址来播放的，这样我们就可以很好的在中间层（本地代理层）做一些处理，比如：文件缓存，预缓存（秒开处理），监控等。 原理详细一点来说 1.采用了本地代理服务的方式，通过原始url给播放器返回一个本地代理的一个url ，代理URL类似：http://127.0.0.1:port/视频url；（port端口为系统随机分配的有效端口，真实url是为了真正的下载），然后播放器播放的时候请求到了你本地的代理上了。 2.本地代理采用ServerSocket监听127.0.0.1的有效端口，这个时候手机就是一个服务器了，客户端就是socket，也就是播放器。 3.读取客户端就是socket来读取数据（http协议请求）解析http协议。 4.根据url检查视频文件是否存在，读取文件数据给播放器，也就是往socket里写入数据（socket通信）。同时如果没有下载完成会进行断点下载,当然弱网的话数据需要生产消费同步处理。 如何实现预加载 其实预加载的思路很简单，在进行一个播放视频后，再返回接下来需要预加载的视频url，启用线程去请求下载数据 开启一个线程去请求并预加载一部分的数据，可能需要预加载的数据大于>1，利用队列先进入的先进行加载，因此可以采用LinkedHashMap保存正在预加载的task。 在开始预加载的时候，判断该播放地址是否已经预加载，如果不是那么创建一个线程task，并且把它放到map集合中。然后执行预加载逻辑，也就是执行HttpURLConnection请求 提供取消对应url加载的任务，因为有可能该url不需要再进行预加载了，比如参考抖音，当用户瞬间下滑几个视频，那么很多视频就需要跳过了不需要再进行预加载。这个后期在做 10.如何监控视频埋点 传统一点的做法 比如用友盟或者百度统计，或者用其他的统计。之前的做法是，在每个有视频的页面比如说Activity，Fragment等开启时视频播放时埋点一次，页面退出时埋点一次。 如果app中有多个activity或者fragment页面，那么就每个页面都要进行埋点。比如如果你的app是付费视频，你想知道有多少人试看了，该怎么操作。那么你需要在每一个有视频的activity页面挨个添加埋点，那还有没有更好的办法？ 解决方案 举个例子：例如，你需要来让外部开发者手动去埋点，可是在类中怎么埋点又是由其他人来设计的，你只是需要对外暴露监听的方法。那么该如何做呢？采用接口 + 实现类方式即可实现。 该案例中怎么操作 定义一个接口，规定其他人设计类，必须继承这个接口。在这个接口中，定义进入视频播放，退出视频播放器，记录播放进度，视频播放完成，播放异常，点击广告，点击试看等操作的抽象方法。具体可以看BuriedPointEvent类代码…… 外部开发者如何使用 定义一个类实现该视频埋点接口，重写里面方法。然后需要在初始化配置视频播放器的时候，将这个实现类的对象传递进来即可。通过这个配置类传进来的对象，播放器就可以处理监听设置逻辑呢。 这种操作最大的好处就是：在这个类中统一处理视频的埋点，修改快捷，而不用在每一个有视频播放器的页面埋点，方便维护。比如如何处理视频播放完成监听，代码如下所示： @Override public void onCompletion() { VideoPlayerConfig config = VideoViewManager.getConfig(); if (config!=null && config.mBuriedPointEvent!=null){ //视频播放完成 config.mBuriedPointEvent.playerCompletion(mUrl); } } 11.待实现的需求分析 音视频无缝切换 比如在豆神教育中，有视频播放，也有音频播放，这两块都是写到了业务代码中，能否将两者糅合起来。但音频相比视频，多了一个可以在后台播放的功能，一般用在service中，这一相互切换需求待完善。以满足后期可能出现的需求功能。 优化播放器持续平滑播放 画中画方案：虽然Android8.0及其以上版本已提供了画中画方案，但是Android8.0以下版本仍然保有大量用户，其缺点就是无法满足Android8.0以下用户需； 采用系统浮层：采用系统浮层需要系统浮层权限，Android厂商对系统浮层的授权越来越严格，导致用户授权过程的体验比较差；需要权限，可能有些手机不太好适配； 在每个展示页面单独添加播放器浮窗：优点是不受Android系统版本限制，并且用户无需系统浮层权限授权，适合所有手机用户，体验较好 12.一些细节上优化 多使用注解限定符 对于一些关于类型的方法参数，可以多用注解限定符，暴露给外部开发者调用的方法，可以防止传入正确的类型。比如：PlayerFactoryUtils.getPlayer(PlayerConstant.PlayerType.TYPE_IJK) 完善的api文档 api文档充分完善到每一个细节，以及配套demo，方便快速上手。完善的代码注释，以及项目的类结构图，方便快速了解视频播放器的整体轮廓 丰富的demo案例 提供绝大多数场景的视频播放器功能，完全可以套用demo中的案例，甚至你还可以在案例基础上大幅度优化 13.参考案例和博客记录 exo播放器 https://github.com/google/ExoPlayer ijk播放器 https://github.com/bilibili/ijkplayer 阿里云播放器 https://help.aliyun.com/document_detail/51992.html?spm=a2c4g.11186623.2.24.37131bc7j1PoVK#topic2415 GSY播放器 https://github.com/CarGuo/GSYVideoPlayer 饺子播放器 https://github.com/lipangit/JiaoZiVideoPlayer 项目地址：https://github.com/yangchong211/YCVideoPlayer
-
发表了文章 2020-10-16
05.视频播放器内核切换封装
05.视频播放器内核切换封装 目录介绍 01.视频播放器内核封装需求 02.播放器内核架构图 03.如何兼容不同内核播放器 04.看一下ijk的内核实现类 05.看一下exo的内核实现类 06.如何创建不同内核播放器 07.看一下工厂类实现代码 08.后期如何添加新的内核 00.视频播放器通用框架 基础封装视频播放器player，可以在ExoPlayer、MediaPlayer，声网RTC视频播放器内核，原生MediaPlayer可以自由切换 对于视图状态切换和后期维护拓展，避免功能和业务出现耦合。比如需要支持播放器UI高度定制，而不是该lib库中UI代码 针对视频播放，音频播放，播放回放，以及视频直播的功能。使用简单，代码拓展性强，封装性好，主要是和业务彻底解耦，暴露接口监听给开发者处理业务具体逻辑 该播放器整体架构：播放器内核(自由切换) + 视频播放器 + 边播边缓存 + 高度定制播放器UI视图层 项目地址：https://github.com/yangchong211/YCVideoPlayer 关于视频播放器整体功能介绍文档：https://juejin.im/post/6883457444752654343 01.视频播放器内核封装需求 播放器内核难以切换 不同的视频播放器内核，由于api不一样，所以难以切换操作。要是想兼容内核切换，就必须自己制定一个视频接口+实现类的播放器 一定要解耦合 播放器内核与播放器解耦: 支持更多的播放场景、以及新的播放业务快速接入，并且不影响其他播放业务，比如后期添加阿里云播放器内核，或者腾讯播放器内核 传入不同类型方便创建不同内核 隐藏内核播放器创建具体细节，开发者只需要关心所需产品对应的工厂，无须关心创建细节，甚至无须知道具体播放器类的类名。需要符合开闭原则 02.播放器内核架构图 03.如何兼容不同内核播放器 提问：针对不同内核播放器，比如谷歌的ExoPlayer，B站的IjkPlayer，还有原生的MediaPlayer，有些api不一样，那使用的时候如何统一api呢？ 比如说，ijk和exo的视频播放listener监听api就完全不同，这个时候需要做兼容处理 定义接口，然后各个不同内核播放器实现接口，重写抽象方法。调用的时候，获取接口对象调用api，这样就可以统一Api 定义一个接口，这个接口有什么呢？这个接口定义通用视频播放器方法，比如常见的有：视频初始化，设置url，加载，以及播放状态，简单来说可以分为三个部分。 第一部分：视频初始化实例对象方法，主要包括：initPlayer初始化视频，setDataSource设置视频播放器地址，setSurface设置视频播放器渲染view，prepareAsync开始准备播放操作 第二部分：视频播放器状态方法，主要包括：播放，暂停，恢复，重制，设置进度，释放资源，获取进度，设置速度，设置音量 第三部分：player绑定view后，需要监听播放状态，比如播放异常，播放完成，播放准备，播放size变化，还有播放准备 04.看一下ijk的内核实现类 ijk的内核实现类代码如下所示 public class IjkVideoPlayer extends AbstractVideoPlayer { protected IjkMediaPlayer mMediaPlayer; private int mBufferedPercent; private Context mAppContext; public IjkVideoPlayer(Context context) { if (context instanceof Application){ mAppContext = context; } else { mAppContext = context.getApplicationContext(); } } @Override public void initPlayer() { mMediaPlayer = new IjkMediaPlayer(); //native日志 IjkMediaPlayer.native_setLogLevel(VideoLogUtils.isIsLog() ? IjkMediaPlayer.IJK_LOG_INFO : IjkMediaPlayer.IJK_LOG_SILENT); setOptions(); mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC); initListener(); } @Override public void setOptions() { } /** * ijk视频播放器监听listener */ private void initListener() { // 设置监听，可以查看ijk中的IMediaPlayer源码监听事件 // 设置视频错误监听器 mMediaPlayer.setOnErrorListener(onErrorListener); // 设置视频播放完成监听事件 mMediaPlayer.setOnCompletionListener(onCompletionListener); // 设置视频信息监听器 mMediaPlayer.setOnInfoListener(onInfoListener); // 设置视频缓冲更新监听事件 mMediaPlayer.setOnBufferingUpdateListener(onBufferingUpdateListener); // 设置准备视频播放监听事件 mMediaPlayer.setOnPreparedListener(onPreparedListener); // 设置视频大小更改监听器 mMediaPlayer.setOnVideoSizeChangedListener(onVideoSizeChangedListener); // 设置视频seek完成监听事件 mMediaPlayer.setOnSeekCompleteListener(onSeekCompleteListener); // 设置时间文本监听器 mMediaPlayer.setOnTimedTextListener(onTimedTextListener); mMediaPlayer.setOnNativeInvokeListener(new IjkMediaPlayer.OnNativeInvokeListener() { @Override public boolean onNativeInvoke(int i, Bundle bundle) { return true; } }); } /** * 设置播放地址 * * @param path 播放地址 * @param headers 播放地址请求头 */ @Override public void setDataSource(String path, Map<String, String> headers) { // 设置dataSource if(path==null || path.length()==0){ if (mPlayerEventListener!=null){ mPlayerEventListener.onInfo(PlayerConstant.MEDIA_INFO_URL_NULL, 0); } return; } try { //解析path Uri uri = Uri.parse(path); if (ContentResolver.SCHEME_ANDROID_RESOURCE.equals(uri.getScheme())) { RawDataSourceProvider rawDataSourceProvider = RawDataSourceProvider.create(mAppContext, uri); mMediaPlayer.setDataSource(rawDataSourceProvider); } else { //处理UA问题 if (headers != null) { String userAgent = headers.get("User-Agent"); if (!TextUtils.isEmpty(userAgent)) { mMediaPlayer.setOption(IjkMediaPlayer.OPT_CATEGORY_FORMAT, "user_agent", userAgent); } } mMediaPlayer.setDataSource(mAppContext, uri, headers); } } catch (Exception e) { mPlayerEventListener.onError(); } } /** * 用于播放raw和asset里面的视频文件 */ @Override public void setDataSource(AssetFileDescriptor fd) { try { mMediaPlayer.setDataSource(new RawDataSourceProvider(fd)); } catch (Exception e) { mPlayerEventListener.onError(); } } /** * 设置渲染视频的View,主要用于TextureView * @param surface surface */ @Override public void setSurface(Surface surface) { mMediaPlayer.setSurface(surface); } /** * 准备开始播放（异步） */ @Override public void prepareAsync() { try { mMediaPlayer.prepareAsync(); } catch (IllegalStateException e) { mPlayerEventListener.onError(); } } /** * 暂停 */ @Override public void pause() { try { mMediaPlayer.pause(); } catch (IllegalStateException e) { mPlayerEventListener.onError(); } } /** * 播放 */ @Override public void start() { try { mMediaPlayer.start(); } catch (IllegalStateException e) { mPlayerEventListener.onError(); } } /** * 停止 */ @Override public void stop() { try { mMediaPlayer.stop(); } catch (IllegalStateException e) { mPlayerEventListener.onError(); } } /** * 重置播放器 */ @Override public void reset() { mMediaPlayer.reset(); mMediaPlayer.setOnVideoSizeChangedListener(onVideoSizeChangedListener); setOptions(); } /** * 是否正在播放 */ @Override public boolean isPlaying() { return mMediaPlayer.isPlaying(); } /** * 调整进度 */ @Override public void seekTo(long time) { try { mMediaPlayer.seekTo((int) time); } catch (IllegalStateException e) { mPlayerEventListener.onError(); } } /** * 释放播放器 */ @Override public void release() { mMediaPlayer.setOnErrorListener(null); mMediaPlayer.setOnCompletionListener(null); mMediaPlayer.setOnInfoListener(null); mMediaPlayer.setOnBufferingUpdateListener(null); mMediaPlayer.setOnPreparedListener(null); mMediaPlayer.setOnVideoSizeChangedListener(null); new Thread() { @Override public void run() { try { mMediaPlayer.release(); } catch (Exception e) { e.printStackTrace(); } } }.start(); } /** * 获取当前播放的位置 */ @Override public long getCurrentPosition() { return mMediaPlayer.getCurrentPosition(); } /** * 获取视频总时长 */ @Override public long getDuration() { return mMediaPlayer.getDuration(); } /** * 获取缓冲百分比 */ @Override public int getBufferedPercentage() { return mBufferedPercent; } /** * 设置渲染视频的View,主要用于SurfaceView */ @Override public void setDisplay(SurfaceHolder holder) { mMediaPlayer.setDisplay(holder); } /** * 设置音量 */ @Override public void setVolume(float v1, float v2) { mMediaPlayer.setVolume(v1, v2); } /** * 设置是否循环播放 */ @Override public void setLooping(boolean isLooping) { mMediaPlayer.setLooping(isLooping); } /** * 设置播放速度 */ @Override public void setSpeed(float speed) { mMediaPlayer.setSpeed(speed); } /** * 获取播放速度 */ @Override public float getSpeed() { return mMediaPlayer.getSpeed(0); } /** * 获取当前缓冲的网速 */ @Override public long getTcpSpeed() { return mMediaPlayer.getTcpSpeed(); } /** * 设置视频错误监听器 * int MEDIA_INFO_VIDEO_RENDERING_START = 3;//视频准备渲染 * int MEDIA_INFO_BUFFERING_START = 701;//开始缓冲 * int MEDIA_INFO_BUFFERING_END = 702;//缓冲结束 * int MEDIA_INFO_VIDEO_ROTATION_CHANGED = 10001;//视频选择信息 * int MEDIA_ERROR_SERVER_DIED = 100;//视频中断，一般是视频源异常或者不支持的视频类型。 * int MEDIA_ERROR_IJK_PLAYER = -10000,//一般是视频源有问题或者数据格式不支持，比如音频不是AAC之类的 * int MEDIA_ERROR_NOT_VALID_FOR_PROGRESSIVE_PLAYBACK = 200;//数据错误没有有效的回收 */ private IMediaPlayer.OnErrorListener onErrorListener = new IMediaPlayer.OnErrorListener() { @Override public boolean onError(IMediaPlayer iMediaPlayer, int framework_err, int impl_err) { mPlayerEventListener.onError(); VideoLogUtils.d("IjkVideoPlayer----listener---------onError ——> STATE_ERROR ———— what：" + framework_err + ", extra: " + impl_err); return true; } }; /** * 设置视频播放完成监听事件 */ private IMediaPlayer.OnCompletionListener onCompletionListener = new IMediaPlayer.OnCompletionListener() { @Override public void onCompletion(IMediaPlayer iMediaPlayer) { mPlayerEventListener.onCompletion(); VideoLogUtils.d("IjkVideoPlayer----listener---------onCompletion ——> STATE_COMPLETED"); } }; /** * 设置视频信息监听器 */ private IMediaPlayer.OnInfoListener onInfoListener = new IMediaPlayer.OnInfoListener() { @Override public boolean onInfo(IMediaPlayer iMediaPlayer, int what, int extra) { mPlayerEventListener.onInfo(what, extra); VideoLogUtils.d("IjkVideoPlayer----listener---------onInfo ——> ———— what：" + what + ", extra: " + extra); return true; } }; /** * 设置视频缓冲更新监听事件 */ private IMediaPlayer.OnBufferingUpdateListener onBufferingUpdateListener = new IMediaPlayer.OnBufferingUpdateListener() { @Override public void onBufferingUpdate(IMediaPlayer iMediaPlayer, int percent) { mBufferedPercent = percent; } }; /** * 设置准备视频播放监听事件 */ private IMediaPlayer.OnPreparedListener onPreparedListener = new IMediaPlayer.OnPreparedListener() { @Override public void onPrepared(IMediaPlayer iMediaPlayer) { mPlayerEventListener.onPrepared(); VideoLogUtils.d("IjkVideoPlayer----listener---------onPrepared ——> STATE_PREPARED"); } }; /** * 设置视频大小更改监听器 */ private IMediaPlayer.OnVideoSizeChangedListener onVideoSizeChangedListener = new IMediaPlayer.OnVideoSizeChangedListener() { @Override public void onVideoSizeChanged(IMediaPlayer iMediaPlayer, int width, int height, int sar_num, int sar_den) { int videoWidth = iMediaPlayer.getVideoWidth(); int videoHeight = iMediaPlayer.getVideoHeight(); if (videoWidth != 0 && videoHeight != 0) { mPlayerEventListener.onVideoSizeChanged(videoWidth, videoHeight); } VideoLogUtils.d("IjkVideoPlayer----listener---------onVideoSizeChanged ——> WIDTH：" + width + "， HEIGHT：" + height); } }; /** * 设置时间文本监听器 */ private IMediaPlayer.OnTimedTextListener onTimedTextListener = new IMediaPlayer.OnTimedTextListener() { @Override public void onTimedText(IMediaPlayer iMediaPlayer, IjkTimedText ijkTimedText) { } }; /** * 设置视频seek完成监听事件 */ private IMediaPlayer.OnSeekCompleteListener onSeekCompleteListener = new IMediaPlayer.OnSeekCompleteListener() { @Override public void onSeekComplete(IMediaPlayer iMediaPlayer) { } }; } 05.看一下exo的内核实现类 exo的内核实现类代码如下所示，和ijk的api有些区别 public class ExoMediaPlayer extends AbstractVideoPlayer implements VideoListener, Player.EventListener { protected Context mAppContext; protected SimpleExoPlayer mInternalPlayer; protected MediaSource mMediaSource; protected ExoMediaSourceHelper mMediaSourceHelper; private PlaybackParameters mSpeedPlaybackParameters; private int mLastReportedPlaybackState = Player.STATE_IDLE; private boolean mLastReportedPlayWhenReady = false; private boolean mIsPreparing; private boolean mIsBuffering; private LoadControl mLoadControl; private RenderersFactory mRenderersFactory; private TrackSelector mTrackSelector; public ExoMediaPlayer(Context context) { if (context instanceof Application){ mAppContext = context; } else { mAppContext = context.getApplicationContext(); } mMediaSourceHelper = ExoMediaSourceHelper.getInstance(context); } @Override public void initPlayer() { //创建exo播放器 mInternalPlayer = new SimpleExoPlayer.Builder( mAppContext, mRenderersFactory == null ? mRenderersFactory = new DefaultRenderersFactory(mAppContext) : mRenderersFactory, mTrackSelector == null ? mTrackSelector = new DefaultTrackSelector(mAppContext) : mTrackSelector, mLoadControl == null ? mLoadControl = new DefaultLoadControl() : mLoadControl, DefaultBandwidthMeter.getSingletonInstance(mAppContext), Util.getLooper(), new AnalyticsCollector(Clock.DEFAULT), /* useLazyPreparation= */ true, Clock.DEFAULT) .build(); setOptions(); //播放器日志 if (VideoLogUtils.isIsLog() && mTrackSelector instanceof MappingTrackSelector) { mInternalPlayer.addAnalyticsListener(new EventLogger((MappingTrackSelector) mTrackSelector, "ExoPlayer")); } initListener(); } /** * exo视频播放器监听listener */ private void initListener() { mInternalPlayer.addListener(this); mInternalPlayer.addVideoListener(this); } public void setTrackSelector(TrackSelector trackSelector) { mTrackSelector = trackSelector; } public void setRenderersFactory(RenderersFactory renderersFactory) { mRenderersFactory = renderersFactory; } public void setLoadControl(LoadControl loadControl) { mLoadControl = loadControl; } /** * 设置播放地址 * * @param path 播放地址 * @param headers 播放地址请求头 */ @Override public void setDataSource(String path, Map<String, String> headers) { // 设置dataSource if(path==null || path.length()==0){ if (mPlayerEventListener!=null){ mPlayerEventListener.onInfo(PlayerConstant.MEDIA_INFO_URL_NULL, 0); } return; } mMediaSource = mMediaSourceHelper.getMediaSource(path, headers); } @Override public void setDataSource(AssetFileDescriptor fd) { //no support } /** * 准备开始播放（异步） */ @Override public void prepareAsync() { if (mInternalPlayer == null){ return; } if (mMediaSource == null){ return; } if (mSpeedPlaybackParameters != null) { mInternalPlayer.setPlaybackParameters(mSpeedPlaybackParameters); } mIsPreparing = true; mMediaSource.addEventListener(new Handler(), mMediaSourceEventListener); //准备播放 mInternalPlayer.prepare(mMediaSource); } /** * 播放 */ @Override public void start() { if (mInternalPlayer == null){ return; } mInternalPlayer.setPlayWhenReady(true); } /** * 暂停 */ @Override public void pause() { if (mInternalPlayer == null){ return; } mInternalPlayer.setPlayWhenReady(false); } /** * 停止 */ @Override public void stop() { if (mInternalPlayer == null){ return; } mInternalPlayer.stop(); } private MediaSourceEventListener mMediaSourceEventListener = new MediaSourceEventListener() { @Override public void onReadingStarted(int windowIndex, MediaSource.MediaPeriodId mediaPeriodId) { if (mPlayerEventListener != null && mIsPreparing) { mPlayerEventListener.onPrepared(); } } }; /** * 重置播放器 */ @Override public void reset() { if (mInternalPlayer != null) { mInternalPlayer.stop(true); mInternalPlayer.setVideoSurface(null); mIsPreparing = false; mIsBuffering = false; mLastReportedPlaybackState = Player.STATE_IDLE; mLastReportedPlayWhenReady = false; } } /** * 是否正在播放 */ @Override public boolean isPlaying() { if (mInternalPlayer == null){ return false; } int state = mInternalPlayer.getPlaybackState(); switch (state) { case Player.STATE_BUFFERING: case Player.STATE_READY: return mInternalPlayer.getPlayWhenReady(); case Player.STATE_IDLE: case Player.STATE_ENDED: default: return false; } } /** * 调整进度 */ @Override public void seekTo(long time) { if (mInternalPlayer == null){ return; } mInternalPlayer.seekTo(time); } /** * 释放播放器 */ @Override public void release() { if (mInternalPlayer != null) { mInternalPlayer.removeListener(this); mInternalPlayer.removeVideoListener(this); final SimpleExoPlayer player = mInternalPlayer; mInternalPlayer = null; new Thread() { @Override public void run() { //异步释放，防止卡顿 player.release(); } }.start(); } mIsPreparing = false; mIsBuffering = false; mLastReportedPlaybackState = Player.STATE_IDLE; mLastReportedPlayWhenReady = false; mSpeedPlaybackParameters = null; } /** * 获取当前播放的位置 */ @Override public long getCurrentPosition() { if (mInternalPlayer == null){ return 0; } return mInternalPlayer.getCurrentPosition(); } /** * 获取视频总时长 */ @Override public long getDuration() { if (mInternalPlayer == null){ return 0; } return mInternalPlayer.getDuration(); } /** * 获取缓冲百分比 */ @Override public int getBufferedPercentage() { return mInternalPlayer == null ? 0 : mInternalPlayer.getBufferedPercentage(); } /** * 设置渲染视频的View,主要用于SurfaceView */ @Override public void setSurface(Surface surface) { if (mInternalPlayer != null) { mInternalPlayer.setVideoSurface(surface); } } @Override public void setDisplay(SurfaceHolder holder) { if (holder == null){ setSurface(null); } else{ setSurface(holder.getSurface()); } } /** * 设置音量 */ @Override public void setVolume(float leftVolume, float rightVolume) { if (mInternalPlayer != null){ mInternalPlayer.setVolume((leftVolume + rightVolume) / 2); } } /** * 设置是否循环播放 */ @Override public void setLooping(boolean isLooping) { if (mInternalPlayer != null){ mInternalPlayer.setRepeatMode(isLooping ? Player.REPEAT_MODE_ALL : Player.REPEAT_MODE_OFF); } } @Override public void setOptions() { //准备好就开始播放 mInternalPlayer.setPlayWhenReady(true); } /** * 设置播放速度 */ @Override public void setSpeed(float speed) { PlaybackParameters playbackParameters = new PlaybackParameters(speed); mSpeedPlaybackParameters = playbackParameters; if (mInternalPlayer != null) { mInternalPlayer.setPlaybackParameters(playbackParameters); } } /** * 获取播放速度 */ @Override public float getSpeed() { if (mSpeedPlaybackParameters != null) { return mSpeedPlaybackParameters.speed; } return 1f; } /** * 获取当前缓冲的网速 */ @Override public long getTcpSpeed() { // no support return 0; } @Override public void onPlayerStateChanged(boolean playWhenReady, int playbackState) { if (mPlayerEventListener == null){ return; } if (mIsPreparing){ return; } if (mLastReportedPlayWhenReady != playWhenReady || mLastReportedPlaybackState != playbackState) { switch (playbackState) { //最开始调用的状态 case Player.STATE_IDLE: break; //开始缓充 case Player.STATE_BUFFERING: mPlayerEventListener.onInfo(PlayerConstant.MEDIA_INFO_BUFFERING_START, getBufferedPercentage()); mIsBuffering = true; break; //开始播放 case Player.STATE_READY: if (mIsBuffering) { mPlayerEventListener.onInfo(PlayerConstant.MEDIA_INFO_BUFFERING_END, getBufferedPercentage()); mIsBuffering = false; } break; //播放器已经播放完了媒体 case Player.STATE_ENDED: mPlayerEventListener.onCompletion(); break; default: break; } mLastReportedPlaybackState = playbackState; mLastReportedPlayWhenReady = playWhenReady; } } @Override public void onPlayerError(ExoPlaybackException error) { if (mPlayerEventListener != null) { mPlayerEventListener.onError(); } } @Override public void onVideoSizeChanged(int width, int height, int unappliedRotationDegrees, float pixelWidthHeightRatio) { if (mPlayerEventListener != null) { mPlayerEventListener.onVideoSizeChanged(width, height); if (unappliedRotationDegrees > 0) { mPlayerEventListener.onInfo(PlayerConstant.MEDIA_INFO_VIDEO_ROTATION_CHANGED, unappliedRotationDegrees); } } } @Override public void onRenderedFirstFrame() { if (mPlayerEventListener != null && mIsPreparing) { mPlayerEventListener.onInfo(PlayerConstant.MEDIA_INFO_VIDEO_RENDERING_START, 0); mIsPreparing = false; } } } 06.如何创建不同内核播放器 先来看一下创建不同内核播放器的代码，只需要开发者传入一个类型参数，即可创建不同类的实例对象。代码如下所示 /** * 获取PlayerFactory具体实现类，获取内核 * 创建对象的时候只需要传递类型type，而不需要对应的工厂，即可创建具体的产品对象 * TYPE_IJK IjkPlayer，基于IjkPlayer封装播放器 * TYPE_NATIVE MediaPlayer，基于原生自带的播放器控件 * TYPE_EXO 基于谷歌视频播放器 * TYPE_RTC 基于RTC视频播放器 * @param type 类型 * @return */ public static AbstractVideoPlayer getVideoPlayer(Context context,@PlayerConstant.PlayerType int type){ if (type == PlayerConstant.PlayerType.TYPE_EXO){ return ExoPlayerFactory.create().createPlayer(context); } else if (type == PlayerConstant.PlayerType.TYPE_IJK){ return IjkPlayerFactory.create().createPlayer(context); } else if (type == PlayerConstant.PlayerType.TYPE_NATIVE){ return MediaPlayerFactory.create().createPlayer(context); } else if (type == PlayerConstant.PlayerType.TYPE_RTC){ return IjkPlayerFactory.create().createPlayer(context); } else { return IjkPlayerFactory.create().createPlayer(context); } } 使用工厂模式创建不同对象的动机是什么，为何要这样使用？ 一个视频播放器可以提供多个内核Player（如ijk、exo、media，rtc等等）， 这些player都源自同一个基类，不过在继承基类后不同的子类修改了部分属性从而使得它们可以呈现不同的外观。 如果希望在使用这些内核player时，不需要知道这些具体内核的名字，只需要知道表示该内核类的一个参数，并提供一个调用方便的方法，把该参数传入方法即可返回一个相应的内核对象，此时，就可以使用工厂模式。 首先定义一个工厂抽象类，然后不同的内核播放器分别创建其具体的工厂实现具体类 PlayerFactory：抽象工厂，担任这个角色的是工厂方法模式的核心，任何在模式中创建对象的工厂类必须实现这个接口 ExoPlayerFactory：具体工厂，具体工厂角色含有与业务密切相关的逻辑，并且受到使用者的调用以创建具体产品对象。 如何使用，分为三步，具体操作如下所示 1.先调用具体工厂对象中的方法createPlayer方法；2.根据传入产品类型参数获得具体的产品对象；3.返回产品对象并使用。 简而言之，创建对象的时候只需要传递类型type，而不需要对应的工厂，即可创建具体的产品对象 07.看一下工厂类实现代码 抽象工厂类，代码如下所示 public abstract class PlayerFactory<T extends AbstractVideoPlayer> { public abstract T createPlayer(Context context); } 具体实现工厂类，代码如下所示 public class ExoPlayerFactory extends PlayerFactory<ExoMediaPlayer> { public static ExoPlayerFactory create() { return new ExoPlayerFactory(); } @Override public ExoMediaPlayer createPlayer(Context context) { return new ExoMediaPlayer(context); } } 这种创建对象最大优点 工厂方法用来创建所需要的产品，同时隐藏了哪种具体产品类将被实例化这一细节，用户只需要关心所需产品对应的工厂，无须关心创建细节，甚至无须知道具体产品类的类名。 加入新的产品时，比如后期新加一个阿里播放器内核，这个时候就只需要添加一个具体工厂和具体产品就可以。系统的可扩展性也就变得非常好，完全符合“开闭原则” 08.后期如何添加新的内核 比如后期想要添加一个腾讯视频内核的播放器。代码如下所示，这个是简化的 public class TxPlayerFactory extends PlayerFactory<TxMediaPlayer> { public static TxPlayerFactory create() { return new TxPlayerFactory(); } @Override public TxMediaPlayer createPlayer(Context context) { return new TxMediaPlayer(context); } } public class TxMediaPlayer extends AbstractVideoPlayer { //省略接口的实现方法代码 }
-
发表了文章 2020-10-16
03.视频播放器Api说明
03.视频播放器Api说明 目录介绍 01.最简单的播放 02.如何切换视频内核 03.切换视频模式 04.切换视频清晰度 05.视频播放监听 06.列表中播放处理 07.悬浮窗口播放 08.其他重要功能Api 09.播放多个视频 10.VideoPlayer相关Api 11.Controller相关Api 12.边播放边缓存api 13.类似抖音视频预加载 14.视频播放器埋点 00.视频播放器通用框架 基础封装视频播放器player，可以在ExoPlayer、MediaPlayer，声网RTC视频播放器内核，原生MediaPlayer可以自由切换 对于视图状态切换和后期维护拓展，避免功能和业务出现耦合。比如需要支持播放器UI高度定制，而不是该lib库中UI代码 针对视频播放，音频播放，播放回放，以及视频直播的功能。使用简单，代码拓展性强，封装性好，主要是和业务彻底解耦，暴露接口监听给开发者处理业务具体逻辑 该播放器整体架构：播放器内核(自由切换) + 视频播放器 + 边播边缓存 + 高度定制播放器UI视图层 项目地址：https://github.com/yangchong211/YCVideoPlayer 关于视频播放器整体功能介绍文档：https://juejin.im/post/6883457444752654343 01.最简单的播放 必须需要的四步骤代码如下所示 //创建基础视频播放器，一般播放器的功能 BasisVideoController controller = new BasisVideoController(this); //设置控制器 mVideoPlayer.setVideoController(controller); //设置视频播放链接地址 mVideoPlayer.setUrl(url); //开始播放 mVideoPlayer.start(); 开始播放 //播放视频 videoPlayer.start(); 02.如何切换视频内核 创建视频播放器 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); 如何配置视频内核 //播放器配置，注意：此为全局配置，例如下面就是配置ijk内核播放器 VideoViewManager.setConfig(VideoPlayerConfig.newBuilder() .setLogEnabled(true)//调试的时候请打开日志，方便排错 .setPlayerFactory(IjkPlayerFactory.create()) .build()); 切换视频内核处理代码 @SuppressLint("SetTextI18n") private void setChangeVideoType(@ConstantKeys.PlayerType int type){ //切换播放核心，不推荐这么做，我这么写只是为了方便测试 VideoPlayerConfig config = VideoViewManager.getConfig(); try { Field mPlayerFactoryField = config.getClass().getDeclaredField("mPlayerFactory"); mPlayerFactoryField.setAccessible(true); PlayerFactory playerFactory = null; switch (type) { case ConstantKeys.VideoPlayerType.TYPE_IJK: playerFactory = IjkPlayerFactory.create(); mTvTitle.setText("视频内核：" + " (IjkPlayer)"); break; case ConstantKeys.VideoPlayerType.TYPE_EXO: playerFactory = ExoPlayerFactory.create(); mTvTitle.setText("视频内核：" + " (ExoPlayer)"); break; case ConstantKeys.VideoPlayerType.TYPE_NATIVE: playerFactory = MediaPlayerFactory.create(); mTvTitle.setText("视频内核：" + " (MediaPlayer)"); break; case ConstantKeys.VideoPlayerType.TYPE_RTC: break; } mPlayerFactoryField.set(config, playerFactory); } catch (Exception e) { e.printStackTrace(); } } 03.切换视频模式 关于全屏模式相关api //进入全屏 mVideoPlayer.startFullScreen(); //退出全屏 mVideoPlayer.stopFullScreen(); 关于小窗口播放相关api //开启小屏 mVideoPlayer.startTinyScreen(); //退出小屏 mVideoPlayer.stopTinyScreen(); 04.切换视频清晰度 05.视频播放监听 这个分为两部分：第一部分是播放模式监听，第二部分是播放状态监听，暴露给开发者。这里不建议使用0，1，非常不方便简明之意，采用注解限定。 mVideoPlayer.setOnStateChangeListener(new OnVideoStateListener() { /** * 播放模式 * 普通模式，小窗口模式，正常模式三种其中一种 * MODE_NORMAL 普通模式 * MODE_FULL_SCREEN 全屏模式 * MODE_TINY_WINDOW 小屏模式 * @param playerState 播放模式 */ @Override public void onPlayerStateChanged(int playerState) { switch (playerState) { case ConstantKeys.PlayMode.MODE_NORMAL: //普通模式 break; case ConstantKeys.PlayMode.MODE_FULL_SCREEN: //全屏模式 break; case ConstantKeys.PlayMode.MODE_TINY_WINDOW: //小屏模式 break; } } /** * 播放状态 * -1 播放错误 * 0 播放未开始 * 1 播放准备中 * 2 播放准备就绪 * 3 正在播放 * 4 暂停播放 * 5 正在缓冲(播放器正在播放时，缓冲区数据不足，进行缓冲，缓冲区数据足够后恢复播放) * 6 暂停缓冲(播放器正在播放时，缓冲区数据不足，进行缓冲，此时暂停播放器，继续缓冲，缓冲区数据足够后恢复暂停 * 7 播放完成 * 8 开始播放中止 * @param playState 播放状态，主要是指播放器的各种状态 */ @Override public void onPlayStateChanged(int playState) { switch (playState) { case ConstantKeys.CurrentState.STATE_IDLE: //播放未开始，初始化 break; case ConstantKeys.CurrentState.STATE_START_ABORT: //开始播放中止 break; case ConstantKeys.CurrentState.STATE_PREPARING: //播放准备中 break; case ConstantKeys.CurrentState.STATE_PREPARED: //播放准备就绪 break; case ConstantKeys.CurrentState.STATE_ERROR: //播放错误 break; case ConstantKeys.CurrentState.STATE_BUFFERING_PLAYING: //正在缓冲 break; case ConstantKeys.CurrentState.STATE_PLAYING: //正在播放 break; case ConstantKeys.CurrentState.STATE_PAUSED: //暂停播放 break; case ConstantKeys.CurrentState.STATE_BUFFERING_PAUSED: //暂停缓冲 break; case ConstantKeys.CurrentState.STATE_COMPLETED: //播放完成 break; } } }); 06.在列表中播放 第一步：初始化视频播放器，创建VideoPlayer对象 mVideoView = new VideoPlayer(context); mVideoView.setOnStateChangeListener(new VideoPlayer.SimpleOnStateChangeListener() { @Override public void onPlayStateChanged(int playState) { //监听VideoViewManager释放，重置状态 if (playState == ConstantKeys.CurrentState.STATE_IDLE) { PlayerUtils.removeViewFormParent(mVideoView); mLastPos = mCurPos; mCurPos = -1; } } }); mController = new BasisVideoController(context); mVideoView.setController(mController); 第二步：设置RecyclerView和Adapter mAdapter.setOnItemChildClickListener(new OnItemChildClickListener() { @Override public void onItemChildClick(int position) { //点击item播放视频 startPlay(position); } }); mRecyclerView.addOnChildAttachStateChangeListener(new RecyclerView.OnChildAttachStateChangeListener() { @Override public void onChildViewAttachedToWindow(@NonNull View view) { } @Override public void onChildViewDetachedFromWindow(@NonNull View view) { FrameLayout playerContainer = view.findViewById(R.id.player_container); View v = playerContainer.getChildAt(0); if (v != null && v == mVideoView && !mVideoView.isFullScreen()) { //销毁视频 releaseVideoView(); } } }); 第三步：播放视频和销毁视频的逻辑代码 /** * 开始播放 * @param position 列表位置 */ protected void startPlay(int position) { if (mCurPos == position) return; if (mCurPos != -1) { releaseVideoView(); } VideoInfoBean videoBean = mVideos.get(position); mVideoView.setUrl(videoBean.getVideoUrl()); View itemView = mLinearLayoutManager.findViewByPosition(position); if (itemView == null) return; VideoRecyclerViewAdapter.VideoHolder viewHolder = (VideoRecyclerViewAdapter.VideoHolder) itemView.getTag(); //把列表中预置的PrepareView添加到控制器中，注意isPrivate此处只能为true。 mController.addControlComponent(viewHolder.mPrepareView, true); PlayerUtils.removeViewFormParent(mVideoView); viewHolder.mPlayerContainer.addView(mVideoView, 0); //播放之前将VideoView添加到VideoViewManager以便在别的页面也能操作它 VideoViewManager.instance().add(mVideoView, "list"); mVideoView.start(); mCurPos = position; } private void releaseVideoView() { mVideoView.release(); if (mVideoView.isFullScreen()) { mVideoView.stopFullScreen(); } if(getActivity().getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) { getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); } mCurPos = -1; } 08.其他重要功能Api 设置视频播放器背景图，和视频标题。 //注意，下面这个controller是指BasisVideoController //设置视频背景图 ImageView thumb = controller.getThumb(); Glide.with(this).load(R.drawable.image_default).into(controller.getThumb()); //设置视频标题 controller.setTitle("视频标题"); 判断是否锁屏 //判断是否锁屏 boolean locked = controller.isLocked(); //设置是否锁屏 controller.setLocked(true); 设置播放视频缩放类型。借鉴于网络博客，类似图片缩放。建议选择16：9类型，最常见 mVideoPlayer.setScreenScaleType(ConstantKeys.PlayerScreenScaleType.SCREEN_SCALE_16_9); mVideoPlayer.setScreenScaleType(ConstantKeys.PlayerScreenScaleType.SCREEN_SCALE_DEFAULT); mVideoPlayer.setScreenScaleType(ConstantKeys.PlayerScreenScaleType.SCREEN_SCALE_4_3); mVideoPlayer.setScreenScaleType(ConstantKeys.PlayerScreenScaleType.SCREEN_SCALE_MATCH_PARENT); mVideoPlayer.setScreenScaleType(ConstantKeys.PlayerScreenScaleType.SCREEN_SCALE_ORIGINAL); mVideoPlayer.setScreenScaleType(ConstantKeys.PlayerScreenScaleType.SCREEN_SCALE_CENTER_CROP); 09.播放多个视频 这个举一个例子，比如同时播放两个视频，当然这种情况在app中可能比较少 //必须设置 player1.setUrl(VOD_URL_1); VideoPlayerBuilder.Builder builder = VideoPlayerBuilder.newBuilder(); builder.setEnableAudioFocus(false); VideoPlayerBuilder videoPlayerBuilder = new VideoPlayerBuilder(builder); player1.setVideoBuilder(videoPlayerBuilder); BasisVideoController controller1 = new BasisVideoController(this); player1.setController(controller1); mVideoViews.add(player1); //必须设置 player2.setUrl(VOD_URL_2); VideoPlayerBuilder.Builder builder2 = VideoPlayerBuilder.newBuilder(); builder.setEnableAudioFocus(false); VideoPlayerBuilder videoPlayerBuilder2 = new VideoPlayerBuilder(builder2); player2.setVideoBuilder(videoPlayerBuilder2); BasisVideoController controller2 = new BasisVideoController(this); player2.setController(controller2); mVideoViews.add(player2); 那么要是页面切换到后台，如何处理多个视频的暂停功能呢？如下所示： @Override protected void onPause() { super.onPause(); for (VideoPlayer vv : mVideoViews) { vv.pause(); } } @Override protected void onResume() { super.onResume(); for (VideoPlayer vv : mVideoViews) { vv.pause(); } } @Override protected void onDestroy() { super.onDestroy(); for (VideoPlayer vv : mVideoViews) { vv.release(); } } @Override public void onBackPressed() { for (VideoPlayer vv : mVideoViews) { if (vv.onBackPressed()) return; } super.onBackPressed(); } 10.VideoPlayer相关Api 关于视频播放相关的api如下所示 //暂停播放 mVideoPlayer.pause(); //视频缓冲完毕，准备开始播放时回调 mVideoPlayer.onPrepared(); //重新播放 mVideoPlayer.replay(true); //继续播放 mVideoPlayer.resume(); //调整播放进度 mVideoPlayer.seekTo(100); //循环播放， 默认不循环播放 mVideoPlayer.setLooping(true); //设置播放速度 mVideoPlayer.setSpeed(1.1f); //设置音量 0.0f-1.0f 之间 mVideoPlayer.setVolume(1,1); //开始播放 mVideoPlayer.start(); 关于视频切换播放模式相关api //判断是否处于全屏状态 boolean fullScreen = mVideoPlayer.isFullScreen(); //是否是小窗口模式 boolean tinyScreen = mVideoPlayer.isTinyScreen(); //进入全屏 mVideoPlayer.startFullScreen(); //退出全屏 mVideoPlayer.stopFullScreen(); //开启小屏 mVideoPlayer.startTinyScreen(); //退出小屏 mVideoPlayer.stopTinyScreen(); 关于其他比如获取速度，音量，设置属性相关Api //VideoPlayer相关 VideoPlayerBuilder.Builder builder = VideoPlayerBuilder.newBuilder(); VideoPlayerBuilder videoPlayerBuilder = new VideoPlayerBuilder(builder); //设置视频播放器的背景色 builder.setPlayerBackgroundColor(Color.BLACK); //设置小屏的宽高 int[] mTinyScreenSize = {0, 0}; builder.setTinyScreenSize(mTinyScreenSize); //是否开启AudioFocus监听， 默认开启 builder.setEnableAudioFocus(false); mVideoPlayer.setVideoBuilder(videoPlayerBuilder); //截图 Bitmap bitmap = mVideoPlayer.doScreenShot(); //移除所有播放状态监听 mVideoPlayer.clearOnStateChangeListeners(); //获取当前缓冲百分比 int bufferedPercentage = mVideoPlayer.getBufferedPercentage(); //获取当前播放器的状态 int currentPlayerState = mVideoPlayer.getCurrentPlayerState(); //获取当前的播放状态 int currentPlayState = mVideoPlayer.getCurrentPlayState(); //获取当前播放的位置 long currentPosition = mVideoPlayer.getCurrentPosition(); //获取视频总时长 long duration = mVideoPlayer.getDuration(); //获取倍速速度 float speed = mVideoPlayer.getSpeed(); //获取缓冲速度 long tcpSpeed = mVideoPlayer.getTcpSpeed(); //获取视频宽高 int[] videoSize = mVideoPlayer.getVideoSize(); //是否处于静音状态 boolean mute = mVideoPlayer.isMute(); 11.Controller相关Api Controller控制器相关的Api说明 //设置视频背景图 ImageView thumb = controller.getThumb(); Glide.with(this).load(R.drawable.image_default).into(controller.getThumb()); //设置视频标题 controller.setTitle("视频标题"); //添加自定义视图。每添加一个视图，都是方式层级树的最上层 CustomErrorView customErrorView = new CustomErrorView(this); controller.addControlComponent(customErrorView); //移除控制组件 controller.removeControlComponent(customErrorView); //移除所有的组件 controller.removeAllControlComponent(); //隐藏播放视图 controller.hide(); //显示播放视图 controller.show(); //是否开启根据屏幕方向进入/退出全屏 controller.setEnableOrientation(true); //显示移动网络播放提示 controller.showNetWarning(); //刘海的高度 int cutoutHeight = controller.getCutoutHeight(); //是否有刘海屏 boolean b = controller.hasCutout(); //设置是否适配刘海屏 controller.setAdaptCutout(true); //停止刷新进度 controller.stopProgress(); //开始刷新进度，注意：需在STATE_PLAYING时调用才会开始刷新进度 controller.startProgress(); //判断是否锁屏 boolean locked = controller.isLocked(); //设置是否锁屏 controller.setLocked(true); //取消计时 controller.stopFadeOut(); //开始计时 controller.startFadeOut(); //设置播放视图自动隐藏超时 controller.setDismissTimeout(8); //销毁 controller.destroy(); 12.边播放边缓存api 如下所示 controller = new BasisVideoController(this); //设置视频背景图 Glide.with(this).load(R.drawable.image_default).into(controller.getThumb()); //设置控制器 mVideoPlayer.setController(controller); HttpProxyCacheServer server = new HttpProxyCacheServer(this); String proxyVideoUrl = server.getProxyUrl(URL_AD); mVideoPlayer.setUrl(proxyUrl); mVideoPlayer.start(); 13.类似抖音视频预加载 如下所示，这个是针对ViewPager //获取PreloadManager预加载管理者对象 mPreloadManager = PreloadManager.getInstance(this); //在播放视频的时候 String playUrl = mPreloadManager.getPlayUrl(url); VideoLogUtils.i("startPlay: " + "position: " + position + " url: " + playUrl); mVideoPlayer.setUrl(playUrl); //在页面滚动的时候 mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageScrollStateChanged(int state) { super.onPageScrollStateChanged(state); if (state == VerticalViewPager.SCROLL_STATE_IDLE) { mPreloadManager.resumePreload(mCurPos, mIsReverseScroll); } else { mPreloadManager.pausePreload(mCurPos, mIsReverseScroll); } } }); 如下所示，这个是针对RecyclerView recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { /** * 是否反向滑动 */ private boolean mIsReverseScroll; @Override public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); if (dy>0){ //表示下滑 mIsReverseScroll = false; } else { //表示上滑 mIsReverseScroll = true; } } @Override public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); if (newState == VerticalViewPager.SCROLL_STATE_IDLE) { mPreloadManager.resumePreload(mCurPos, mIsReverseScroll); } else { mPreloadManager.pausePreload(mCurPos, mIsReverseScroll); } } }); 14.视频播放器埋点 代码如下所示，写一个类，实现BuriedPointEvent即可。即可埋点视频的播放次数，播放进度，点击视频广告啥的，方便统一管理 public class BuriedPointEventImpl implements BuriedPointEvent { /** * 进入视频播放 * @param url 视频url */ @Override public void playerIn(String url) { } /** * 退出视频播放 * @param url 视频url */ @Override public void playerDestroy(String url) { } /** * 视频播放完成 * @param url 视频url */ @Override public void playerCompletion(String url) { } /** * 视频播放异常 * @param url 视频url * @param isNetError 是否是网络异常 */ @Override public void onError(String url, boolean isNetError) { } /** * 点击了视频广告 * @param url 视频url */ @Override public void clickAd(String url) { } /** * 退出视频播放时候的播放进度百度分 * @param url 视频url * @param progress 视频进度，计算百分比【退出时候进度 / 总进度】 */ @Override public void playerOutProgress(String url, float progress) { } /** * 视频切换音频 * @param url 视频url */ @Override public void videoToMedia(String url) { } } 15.播放器示例展示图
-
发表了文章 2020-10-15
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.视频视图层级示意图 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 播放状态，主要是指播放器的各种状态 */ @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代码介绍
滑动查看更多
2020年10月
-
10.16 19:09:59
发表了文章
2020-10-16 19:09:59
04.视频播放器通用架构实践
04.视频播放器通用架构实践
-
10.16 09:32:26发表了文章
2020-10-16 09:32:26
05.视频播放器内核切换封装
05.视频播放器内核切换封装
-
10.16 09:25:26发表了文章
2020-10-16 09:25:26
03.视频播放器Api说明
03.视频播放器Api说明
-
10.15 17:43:03发表了文章
2020-10-15 17:43:03
02.视频播放器整体结构
02.视频播放器整体结构
-
10.15 09:37:03发表了文章
2020-10-15 09:37:03
01.视频播放器框架介绍
01.视频播放器框架介绍
-
10.06 11:13:58发表了文章
2020-10-06 11:13:58
01.Android线程池实践基础
01.Android线程池实践基础
2020年09月
-
09.25 19:27:24发表了文章
2020-09-25 19:27:24
Https详细分析
Https详细分析
-
09.23 18:23:48发表了文章
2020-09-23 18:23:48
OkHttp请求耗时统计
OkHttp请求耗时统计
-
09.21 19:43:38发表了文章
2020-09-21 19:43:38
Android端Charles抓包
Android端Charles抓包
-
09.11 20:27:36发表了文章
2020-09-11 20:27:36
Android网络收集和ping封装库
Android网络收集和ping封装库
-
09.07 16:11:53发表了文章
2020-09-07 16:11:53
04.Android崩溃Crash库之Loop拦截崩溃和ANR
04.Android崩溃Crash库之Loop拦截崩溃和ANR -
09.07 16:03:54发表了文章
2020-09-07 16:03:54
03.Android崩溃Crash库之ExceptionHandler分析
03.Android崩溃Crash库之ExceptionHandler分析 -
09.07 15:31:29发表了文章
2020-09-07 15:31:29
02.Android崩溃Crash库之App崩溃分析
02.Android崩溃Crash库之App崩溃分析 -
09.04 17:22:50发表了文章
2020-09-04 17:22:50
01.Android崩溃Crash封装库
01.Android崩溃Crash封装库
滑动查看更多
-
发表了文章
2021-08-26
Flutter Chanel通信流程
-
发表了文章
2021-08-26
Flutter Chanel通信流程
-
发表了文章
2021-08-19
Flutter如何状态管理
-
发表了文章
2020-10-16
04.视频播放器通用架构实践
-
发表了文章
2020-10-16
05.视频播放器内核切换封装
-
发表了文章
2020-10-16
03.视频播放器Api说明
-
发表了文章
2020-10-15
02.视频播放器整体结构
-
发表了文章
2020-10-15
01.视频播放器框架介绍
-
发表了文章
2020-10-06
01.Android线程池实践基础
-
发表了文章
2020-09-25
Https详细分析
-
发表了文章
2020-09-23
OkHttp请求耗时统计
-
发表了文章
2020-09-21
Android端Charles抓包
-
发表了文章
2020-09-11
Android网络收集和ping封装库
-
发表了文章
2020-09-07
04.Android崩溃Crash库之Loop拦截崩溃和ANR
-
发表了文章
2020-09-07
03.Android崩溃Crash库之ExceptionHandler分析
-
发表了文章
2020-09-07
02.Android崩溃Crash库之App崩溃分析
-
发表了文章
2020-09-04
01.Android崩溃Crash封装库
-
发表了文章
2020-08-10
倒计时方案深入分析
-
发表了文章
2020-05-31
WebView库功能完善
-
发表了文章
2020-05-24
uni组件传值注意
滑动查看更多
暂无更多信息