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