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