视频播放历史记录
使用uni-app框架
我的思路:
明确:用户在退出当前播放页或锁屏时或物理返回键返回时帮用户记录;
1.首先用户退出时我们拿到当前播放视频的唯一标识(例如:vid),还有视频已经播放的时长(uniapp官网有方法)
2.存视频vid和时长的时候需要先做一下判断,原来的缓存中是否有相同vid的视频,如果有保存新的停止时间,如果没有可以直接存入;(uni.setStorage() 会替换上一条缓存信息,所以需要把你要保存的每一条视频信息push到一个数组里面,将这个数组保存在缓存中)
try {
this.videoStorage = uni.getStorageSync('videoSchedule')
// 判断缓存中是否存在此视频
const index = this.videoStorage.findIndex(item => item.vid === this.vid)
if (index === -1) {
this.videoStorage.push({
'vid': this.vid, //视频唯一标识
'timeStorage': this.timeStorage, //用户返回时保存的时间
'videoUrl': this.videoInfo.src, //视频播放地址
})
uni.setStorage({
key: 'videoSchedule',
data: this.videoStorage,
success: function() {
console.log('success')
}
})
} else {
//缓存中已有相同视频,改变已看时间替换缓存
this.videoStorage[index].timeStorage = this.timeStorage
uni.setStorage({
key: 'videoSchedule',
data: this.videoStorage
})
}
} catch (error) {
console.error('缓存失败', error)
}
3.在视频开始播放的时候先从缓存中取出你缓存的信息,然后拿到当前视频的vid,用缓存的信息 Array.findIndex() ,在缓存信息中寻找相同vid的视频信息,如果返回-1说明这个视频没有被缓存过,如果返回值不等于-1,那么就可以取出这条缓存,用缓存的时间替换视频播放的初始时间(uniapp官网video标签的属性)。
try {
this.videoStorage = uni.getStorageSync('videoSchedule')
if (this.videoStorage) {
console.log('videoSchedule', this.videoStorage)
const videoArr = this.videoStorage
const index = videoArr.findIndex(item => item.vid === this.vid);
if (index != -1) {
console.log('视频时长', this.videoInfo.duration)
const videoDuration = Number(this.videoInfo.duration)
const initialTime = Number(videoArr[index].timeStorage)
console.log('initialTime===>', initialTime)
if (isNaN(videoDuration) || isNaN(initialTime)) return
// 时长小于5s或剩余5s结束,下次初始位置开始播放
if (initialTime + 5 >= videoDuration || initialTime <= 5) {
this.videoInfo.initialTime = 0
} else {
this.videoInfo.initialTime = initialTime
}
} else {
console.log('没找到')
}
}
this.albumStorage = uni.getStorageSync('albumInfo')
} catch (error) {
console.log('error', error)
}
这就是我要说的问题
这里第一行代码,我已开始用的uni.getStorage()去拿缓存,因为他是异步的,所以就先跑后面的代码,而且我后面的处理方法也没有写在success (成功的回调函数)中,导致我不管怎么样findIndex() 永远返回的都是 -1 。最后还好有我朋友指点才想到取缓存的同步和异步的问题才解决了这个bug。
希望大家吸取我的教训