美文网首页
播放器直播时移节目单计算规则

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

作者: 打酱油的日光灯 | 来源:发表于2024-03-07 15:55 被阅读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秒后会自动关闭,所以此计算展示只在展示之前调整好即可

    ② 自动更新直播节目

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

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

    相关文章

      网友评论

          本文标题:播放器直播时移节目单计算规则

          本文链接:https://www.haomeiwen.com/subject/lmbszdtx.html