uni-app 小程序实现视频播放时,下次打开从上次播放位置开始
2023年08月21日 496
uni-app 开发小程序视频跳转到上次播放时间功能的代码实现。
功能需求描述
使用 uni-app 开发视频类的小程序时,在用户播放视频时,如果没有看完视频,下次再进来看同一个视频时,为了用户体验好,需要跳转到上次看的位置。这个功能怎么实现?
需求分析
首先要明确,从用户的角度来看,在小程序视频没看完,下次进来再看的场景,间隔时间不会特别长,所以用户看视频的时间位置应该不需要实时去请求后端保存记录,更优的做法应该是在本地缓存一个视频播放记录,记录用户最后观看的时间来实现。这个需求很容易实现,不需要后端,这篇文章来告诉你 基于 uni-app 开发实现的方法。
代码实现
记录播放时间
首先,uni-app 视频媒体播放组件 video 中,有一个属性 @timeupdate
,在视频播放进度变化时触发,回调函数接受 event.detail = {currentTime, duration}
,触发频率 250ms 一次。这本来是用来做视频播放进度条的,currentTime / duration
就是百分比。实时监听 currentTime 这个时间进度,并且保存到本地,就可以实现播放时间记录。
跳转到上次播放时间位置
video 组件中 initial-time
属性就是用来指定视频初始播放位置,单位为秒,有个这个属性,就可以很简单实现视频跳转功能。
关键代码
<template>
<video id="myVideo" :src="videoUrl @timeupdate="handleTimeupdate" :initial-time="startTime" controls</video>
</template>
<script>
export default {
data() {
return {
videoId:'yyyyyyy', // 后端返回的视频唯一 ID
videoUrl: 'https://xxxxxxxx.mp4', // 视频播放地址
startTime: 0, // 视频初始播放时间
videoHistory:{} // 本地缓存的视频播放记录,键名为视频ID,键值是上次播放的时间
}
},
onReady: function () {
// 1.先读取 videoId 和 videoUrl,这里忽略
// ...
// 2.查询本地缓存的播放列表,是否有本视频的记录
this.videoHistory = uni.getStorageSync('videoHistory')||{};
if(this.videoHistory[this.videoId] !== undefined){
// 本地有记录,设置为视频播放记录的时间
this.startTime = this.videoHistory[this.videoId];
}
},
methods: {
// 这个方法会随着视频播放,每 0.25s 触发一次
handleTimeupdate: function (event) {
const {currentTime} = event.detail;
this.videoHistory[this.videoId] = currentTime;
// 更新视频记录缓存
uni.setStorageSync('videoHistory',this.videoHistory);
}
}
}
</script>
需要注意的是,上面代码中视频播放记录 videoHistory
,需要定期清理,否则随着用户使用,这个数据会很大,影响性能。记得收藏本站,关注更多 uni-app 开发小程序的技巧。