首页 小程序开发 正文内容

uni-app 小程序实现视频播放时,下次打开从上次播放位置开始

2023年08月21日 255

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 开发小程序的技巧。