哪个小可爱在偷偷的看我~~
偷瞄.gif
前言
以下只提供思路,其他方向也可适用,我们在播放器开发中,也许我们会遇到全屏直播时间移动显示功能,这时候就会遇到怎么样能够美观显示各个节目单长度问题,接下来讲解一下如何计算,效果图如下
直播.gif
说明
比如cctv1频道电视直播,它有已经播放完的节目,正在播放的,以后要播放的,每个节目时间长度不一样,重点来了(每个节目单时间长度不一样,有的时间可能特别长,有的时间很短)这时候我们需要把节目展示到手机上,一个横向的列表,如果等比例根据时间长度显示进度,这样可能发生的情况是,一个屏幕全部展示一个节目,这样就体验很差了,最好的方式是屏幕内最多只能展示4个节目单,长的多展示点,短的少展示点,差距不大的展示出来,如何实现,往下看
开始一步一步实现
当前已知条件
1、节目单集合 list
2、我们当前已知条件,每个节目单的播放时长playTimeLength
3、屏幕长度大小screenWidth
计算规则
我们设定屏幕最多展示4(这个数字根据自己的想法进行改变)个节目单,只能<=,可以得出,每个item的宽度最大为screenWidth * 1/4
即:itemWidth
=screenWidth * 1/4
那有些节目时间长,有些节目时间短,这时候我们可以想到,在基础的屏幕1/4下进行追加长度 x
即:itemWidth
=screenWidth * 1/4
+ x
所以需要求出x的值
接下来是剖析x的计算规则
因为节目单时间长短不一,我们可以假设成,最短的比例可以想象为x=0,长的递增,这样计算看是否成立
因为涉及到最短的和最长的,所以需要最短的值和最长的值
即:找出节目单集合中 最长的时长:maxTimeLength
最短的时长:minTimeLength
因为x为额外增加的值,所以需要一个比例来计算会更好,当前有了最短时长和最长时间,我们可以比较一下,当前item的时长playTimeLength
-minTimeLength
占maxTimeLength
-minTimeLength
的比例是多少呢?
即:设定最短时长和最长时长差值为 a=maxTimeLength
-minTimeLength
设定当前item的时长和最短时长差值为b=playTimeLength
-minTimeLength
当前item所占比例为c=b/a
比例得出了,那根据这个比例可以额外调整一下 x的大小
即:x=c*z
z的值其实可以随便给值了,我们可以看下界面效果给值,根据屏幕的大小找一个比例给会比较合适
即:z=screenWidth*5/12
(屏幕的5/12可以调整)
当然,有些值都是可以根据实际情况动态调整的,如界面最多展示4份, 屏幕的5/12 ,根据实际情况进行调整
总结
itemWidth = screenWidth * 1/4 + (playTimeLength-minTimeLength/maxTimeLength-minTimeLength) * screenWidth*5/12
进度条整体长度 = itemWidth1
+ itemWidth2
+ itemWidth3
+ itemWidth4
+ ...
如下图所示
itemWidth.jpg
交互篇
介绍
界面目前包含时移的名称,播放某个会自动高亮,有进度条,需要自动对应到对应点
页面交互有以下几点
1、点击时移名称
------ ① 点击时移节目
------ ② 点击直播节目
2、滑动进度条
------ ① 滑动时移节目
------ ② 滑动到直播对应点
3、自动更新
------ ① 自动更新时移节目
------ ② 自动更新直播节目
前提条件,后续计算会更方便
1、已知每个itemBean
的startTime
,这个接口中已经获取
2、我们可以在之前步骤提前给每个itemBean
存一个startWidth
,即开始的这个点之前的itemWidth
总和,和startTime
一样,在后续的使用中直接取值即可,即
startWidth2
= itemWidth1
startWidth3
= itemWidth1
+ itemWidth2
startWidth100
= itemWidth1
+ ...
+ itemWidth99
...
3、获取当前直播的 itemBean
当前直播 itemBean
= startTime
< currentTime
< endTime
注:currentTime
为当前时间
4、已知每个itemBean
的playLength
,这个接口中已经获取
5、当前直播总长度liveLength
,进度条滑动不能超过此点
liveMaxLength
= currentTime
✖️ ( itemWidth
÷ playLength
)
分步骤讲解以下几点,一点时移名称
一、点时移名称
① 点击时移节目
目前已知每个 itemBean
的 startWidth
进度条进度 = startWidth
② 点击直播节目
目前已知直播的 itemBean
点击直播节目需要将进度推到当前直播的进度
但是目前currentTime的距离还未知,需要推算出比例,再计算出进度
进度条进度 = 当前 (itemBean
的 playWidth
÷ 当前 itemBean
的 playLength
) ✖️ (currentTime
- itemBean
的 startTime
)
二、滑动进度条
① 滑动时移节目
滑动只知滑动的进度,这时候需要通过距离来推算出滑动到哪个时移节目之下,进行高亮展示
我们假设滑动距离为 x
当前播放遍历所有集合,找到 itemBean
= startWidth
< x
< endWidth
即为播放的节目
② 滑动到直播对应点
目前已知直播的 liveLength
,最大播放点距离
滑动进度条不可超过此点
优化,因为滑动到直播这个点,手指滑动可能会有偏差,看的滑动到直播了,但是px
像素很微小,手指覆盖面积很大,如果按照liveLength
来算,很难滑到最末尾,所以滑动到liveLength
可以给个误差值,体验会更好,可以假设为 liveLength
- 10
三、自动更新
① 自动更新时移节目
当我们切换到某个时移时,播放器播放需要一直更新进度,此时需要我们单独起一个计时器,播放器起播,既需要打开,播放器停止计时器停止
计时器只进行读秒操作,每次读秒,每一秒都需要换算成距离,进行推动进度条进行调整
进度条的进度 = 进度条进度+ itemBean
的 playWidth
÷ playLength
✖️ 1000
此时还需要检测 播放器进度是否大于 startWidth
+ playWidth
如果大于,则播放到了下一个时移节目
优化,因为这个一直需要计算调整着,性能开销会比较大,播放器时移只在全屏下展示,并且点击屏幕会显示5秒,5秒后会自动关闭,所以此计算展示只在展示之前调整好即可
② 自动更新直播节目
直播节目更新需要注意点是,前后台后,需要还是定位到直播这一点,不能根据计时器值来计算,所以需要特殊标注,一直是直播的时长
最终需要整合所有逻辑,遗漏的待补充
网友评论