记录用户上次看视频的进度,并且从记录的时间继续观看

53 篇文章 1 订阅
39 篇文章 0 订阅

思路:因为视频多个,所以定义一个数组接收该用户已观看但是未观看完毕的字段(videoPlanArr),第一次进入获取本地储存的字段(videoPlanArr),如果没有获取到的话储存该视频id;有的话查询是否在数组中,未找到就把视频id添加进videoPlanArr中,有找到的话获取到上次观看的时间,赋值到video的initial-time属性上。timeupdate获取视频播放的进度,更新到videoPlanArr里。ended视频观看完毕删除videoPlanArr里视频id的进度。

<!-- lastDuration:上一次观看的进度 -->
<video :initial-time="lastDuration" @timeupdate="timeupdate" @ended="ended" id="myvideo"></video>
getVideoDetail(){
	...
	//res为请求到的数据
	let videoPlanArr = uni.getStorageSync('videoPlanArr')
	if(videoPlanArr){//判断 本地获取到videoPlanArr里的数据
		let rIndex = videoPlanArr.findIndex((ev)=>{//查询视频id是否在数组中,有的话返回下标,没有则返回-1
			return ev.id == this.id
		}
		if(rIndex == -1){//未找到则把该视频与进度push进数组里
			videoPlanArr.push({
				id:this.id,
				lastDuration:0
			})
			uni.setStorageSync('videoPlanArr',videoPlanArr)
		}else{//找到则获取到储存的进度
			this.lastDuration = videoPlanArr[rIndex].lastDuration
		}
	}else{//未获取到videoPlanArr里的数据
		videoPlanArr = [
			{
				id:this.id,//视频的id
				lastDuration:0,//上次的观看记录
			}
		]
		uni.setStorageSync('videoPlanArr',videoPlanArr) //数据储存到本地
	}
	setTimeout(()=>{
		this.videoContext = uni.createVideoContext('myvideo')
	},100)
},
//播放进度变化时触发
timeupdate(e){
	//e.detail.currentTime是已经播放了多久,e.detail.duration是该视频多长
	let arr = uni.getStorageSync('videoPlanArr')
	let res = arr.findIndex((ev)=>{
		return ev.id == this.id
	})
	arr[res].lastDuration= e.detail.currentTime //更新视频观看进度
	uni.setStorageSync('videoPlanArr',arr)
},
//视频播放完毕
ended(e){
	let arr = uni.getStorageSync('videoPlanArr')
	let res = arr.findIndex((ev)=>{
		return ev.id == this.id
	})
	arr.splice(res,1) //观看完毕删除观看进度记录
	uni.setStorageSync('videoPlanArr',arr)
}
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值