思路:因为视频多个,所以定义一个数组接收该用户已观看但是未观看完毕的字段(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)
}
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐