记住视频播放位置前端实现方案

在视频看课业务中,经常会对用户的视频学习记录进行记录,类似于视频网站的播放记录,区别是视频课程包含多个章节,需要记录XXX课程,第一节看课进度,第二节看课进度,等等。今天就来说说这块的两种实现方案,以及他们的优缺点和适用场景。

方案A:setInterval定时上报+video事件

至于课程,小节,进度时间,都只是上报后端的参数,用来做数据分类用的,这里就不做赘述,着重看Video具体的上报触发点和技术实现方案。

当视频开始播放或者暂停之后再次播放该事件都会被触发,在play事件触发后设置一次timer。

视频暂停。

视频结束。

结合这三个事件对播放记录进行记录。

该方案优点是所涉及的事件支持性较好,缺点是代码过于繁琐,要考虑各种播放场景对定时器进行操作。

方案B:Video timeupdate事件 + _.throttle

在currentTime当前播放时间改变之后触发的事件,不用考虑暂停,结束,重新播放等场景。

此处设置一个2S的阈值,来触发刚开始播放时候的进度保存。

该方案需要考虑播放的业务场景较少,缺点是timeupdate事件再视频设置了cue旁白的时候,旁白没有变,该事件也会被触发,不过目前业务没有涉及,等后续落地到实际项目中再看看兼容性,目前看该事件得到的支持性显示是full。

-- END --

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值