播放器直播时移节目单计算规则

2024-03-07  本文已影响0人  打酱油的日光灯

哪个小可爱在偷偷的看我~~


偷瞄.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-minTimeLengthmaxTimeLength-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、已知每个itemBeanstartTime,这个接口中已经获取

2、我们可以在之前步骤提前给每个itemBean存一个startWidth,即开始的这个点之前的itemWidth总和,和startTime一样,在后续的使用中直接取值即可,即
startWidth2 = itemWidth1
startWidth3 = itemWidth1 + itemWidth2
startWidth100 = itemWidth1 + ...+ itemWidth99
...

3、获取当前直播的 itemBean
当前直播 itemBean = startTime < currentTime < endTime
注:currentTime 为当前时间

4、已知每个itemBeanplayLength,这个接口中已经获取

5、当前直播总长度liveLength,进度条滑动不能超过此点
liveMaxLength = currentTime ✖️ ( itemWidth ÷ playLength )

分步骤讲解以下几点,一点时移名称
一、点时移名称
① 点击时移节目

目前已知每个 itemBeanstartWidth
进度条进度 = startWidth

② 点击直播节目

目前已知直播的 itemBean
点击直播节目需要将进度推到当前直播的进度
但是目前currentTime的距离还未知,需要推算出比例,再计算出进度

进度条进度 = 当前 (itemBeanplayWidth ÷ 当前 itemBeanplayLength) ✖️ (currentTime - itemBeanstartTime)

二、滑动进度条
① 滑动时移节目

滑动只知滑动的进度,这时候需要通过距离来推算出滑动到哪个时移节目之下,进行高亮展示

我们假设滑动距离为 x
当前播放遍历所有集合,找到 itemBean = startWidth < x < endWidth
即为播放的节目

② 滑动到直播对应点

目前已知直播的 liveLength,最大播放点距离
滑动进度条不可超过此点

优化,因为滑动到直播这个点,手指滑动可能会有偏差,看的滑动到直播了,但是px像素很微小,手指覆盖面积很大,如果按照liveLength来算,很难滑到最末尾,所以滑动到liveLength可以给个误差值,体验会更好,可以假设为 liveLength - 10

三、自动更新
① 自动更新时移节目

当我们切换到某个时移时,播放器播放需要一直更新进度,此时需要我们单独起一个计时器,播放器起播,既需要打开,播放器停止计时器停止
计时器只进行读秒操作,每次读秒,每一秒都需要换算成距离,进行推动进度条进行调整

进度条的进度 = 进度条进度+ itemBeanplayWidth ÷ playLength ✖️ 1000

此时还需要检测 播放器进度是否大于 startWidth + playWidth
如果大于,则播放到了下一个时移节目

优化,因为这个一直需要计算调整着,性能开销会比较大,播放器时移只在全屏下展示,并且点击屏幕会显示5秒,5秒后会自动关闭,所以此计算展示只在展示之前调整好即可

② 自动更新直播节目

直播节目更新需要注意点是,前后台后,需要还是定位到直播这一点,不能根据计时器值来计算,所以需要特殊标注,一直是直播的时长

最终需要整合所有逻辑,遗漏的待补充

上一篇 下一篇

猜你喜欢

热点阅读