小程序实现加载动画 和 视频播放跳转到上次播放位置

本文介绍了在小程序中如何实现加载动画展示、视频播放跳转到上次暂停位置的功能。在切换标签时,通过清空videoList并请求新数据来显示加载动画。使用bindtimeupdate事件记录视频播放进度,如果发现历史播放记录,则在点击同一视频时通过VideoContext.seek跳转到对应时间。此外,当加载动画播放完毕,会删除存储的播放记录以节省空间。
摘要由CSDN通过智能技术生成

 一 加载动画

 在点击标签时 把videoList (图片中拼错) 重置为空数组 这时页面就会显示一片空白 然后跳转标签 去请求数据 getvideoList(图片中拼错)

 函数首先放出加载动画 然后请求  这时页面还是一片空白 videoList有值了之后就会显示数据 隐藏对话框

 二 跳转到上次播放位置

 利用bindtimeupdate事件 记录每次进度发生变化时的当前进度 先创建个对象记录每个点击播放的视频 id是标识 if(havevideo) 如果找到有播放记录就随时更新 没有的话就push到videoitem里

 然后每次点击视频时就会判断是不是播放过 如果有就创建VideoContext(控制视频) 通过 .seek 跳转到相应的时间 这里没有this.VideoContext.play()是因为video标签中设置了autoplay

三 动画播放完 删除存储的播放记录 节省空间

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值