视频播放器框架已经非常成熟了,但是由于项目需求各种各样,第三方库使用起来需要大量修改定制,并且还会出现各种问题,因此把之前项目中开发的??樘崛〕隼唇型晟评┱梗戳艘惶鬃匝械牟シ趴蚣?,并且引入Jetpack,通过Lifecycle和LiveData,大大简化了资源监控和UI事件交互方式。目前框架已经稳定应用,所以接下来的时间计划整理出一系列文章,记录从零开始设计开发一个视频播放框架需要哪些知识点,开发过程中个人的一些见解,以及踩过的坑和注意事项。
目前规划本系列文章分12节:
- LitePlayer框架介绍
- 一款播放器框架的结构组成(编写...)
- 播放核心逻辑设计(待编写)
- 播放管理者与内核选择设计(待编写)
- 播放状态监听与UI事件响应(待编写)
- 视频渲染容器设计(待编写)
- 视频比例模式原理和设计(待编写)
- 播放控制界面设计(待编写)
- 手势控制设计(待编写)
- 全屏播放设计(待编写)
- 小窗播放设计(待编写)
- 列表播放设计(待编写)
LitePlayer框架简介:
- LitePlayer是一款Kotlin编写的,轻量简洁,接入简单的视频播放框架。
- 播放层和页面层之间使用LiveData 进行事件通信,页面销毁会自动释放事件。
- 内部通过Lifecycle监听页面生命周期,自动进行暂停,恢复,释放播放动作。
- 列表播放使用attachView方式绑定item视图,减少每个item视图的复杂度,提高列表渲染性能。
- 用户视图层使用组件添加方式,不同的视图层可以进行复用和搭配组装。
- 库编译产物大小200k左右,减少依赖引入成本。
LitePlayer基本使用,代码非常简洁:
// 基础播放场景,和原生VideoView使用方式基本一致:
val litePlayerView = findViewById(R.id.lite_player_view)
litePlayerView.setPlayerType(PlayerType.TYPE_EXO_PLAYER)
litePlayerView.setRenderType(RenderType.TYPE_SURFACE_VIEW)
litePlayerView.setDataSource(DataSource(url))
litePlayerView.start()
// 一些定制化设置:
litePlayerView.attachMediaController(LiteMediaController(context))// 添加一个播放控制器
litePlayerView.attachGestureController(LiteGestureController(this).apply {// 添加一个手势控制器
supportSeek = true// 支持手势seek操作
supportBrightness = true// 支持手势设置屏幕亮度
supportVolume = true// 支持手势设置音量大小
})
litePlayerView.attachFloatWindow(LiteFloatWindow(context))// 添加一个悬浮窗控制器
litePlayerView.setRepeatMode(true)// 设置循环播放
litePlayerView.setVolume(5)// 设置音量
litePlayerView.setPlaySpeed(1.5f)// 设置播放倍速
litePlayerView.setFullScreenMode(true)// 全屏播放
litePlayerView.setFloatWindowMode(true)// 悬浮小窗播放
litePlayerView.setAspectRatio(AspectRatio.W_21_9)// 设置画面比例
// 列表播放场景(基于RecyclerView):
val listPlayer = ListPlayer(LitePlayerView(context))
val videoScrollListener = object : ListPlayer.VideoListScrollListener {
override fun getVideoContainer(position: Int): ViewGroup? {
// 仅需返回position对应ItemView中的视频容器
val holder = recyclerView.findViewHolderForAdapterPosition(position)
return if (holder != null && holder is VideoHolder) {
holder.videoContainer // 一个空的FrameLayout作为attach目标
} else {
null
}
}
override fun getVideoDataSource(position: Int): DataSource? {
// 返回position对应的媒体数据
val data = adapter.getData(position)
return if (data is Video) {
DataSource(VideoCacheHelper.url(data.videoUrl))
} else {
null
}
}
}
listPlayer.attachToRecyclerView(recyclerView, true, videoScrollListener)
LitePlayer结构概述:
- 基于面向接口设计,大部分核心模块都提供顶层接口供用户自定义实现,框架核心接口和实现类:
// 数据层:用户可自定义数据结构
IDataSource
|----DataSource
// 播放层:用户可自定义播放IPlayer内核
IPlayerCore
|----IPlayer
| |----LitePlayerCore // 播放管理类
| |----ExoPlayerImpl // exoplayer实现
| |----IjkPlayerImpl // ijkplayer实现
| |----MediaPlayerImpl // mediaplayer实现
|
|----IPlayerView
|----LitePlayerView // 唯一播放器控件
|----ListPlayer // RecyclerView列表播放辅助类
|----ListPlayer2 // ListView列表播放辅助类
// 渲染层:提供SurfaceView和TextureView渲染方式
IRender
|----RenderSurfaceView // surfaceview渲染容器
|----RenderTextureView // textureview渲染容器
// 用户图层:用户可自定义和组装播放器UI界面
IOverlay
|----IController
| |----LiteMediaController // 媒体播放控制面板
|----ITopbar
| |----LiteMediaTopbar //媒体信息展示面板
|----IGesture
|----LiteGestureController // 媒体播放手势控制面板
// 悬浮窗:用户可自定义悬浮窗UI界面
IFloatWindow
|----LiteFloatWindow // 悬浮窗播放辅助类
- 下面是一些demo示例: