当前位置：首页 > news >正文

在 UniApp 中为小程序实现视频播放记录功能

news 2025/11/15 7:49:58

在 UniApp 中为小程序实现视频播放记录功能，主要思路是在用户播放视频时记录当前的播放进度，并在下次打开时读取并定位到这个时间点。🧩

实现方式	核心思路	优势	注意事项
使用现成插件	利用社区封装好的视频组件，通常已集成播放记录功能。	开发快捷，省时省力，功能稳定。	可能需要付费，定制化程度受插件限制。
原生组件开发	基于 UniApp 的 `video` 组件和 `uni.createVideoContext` API，手动控制播放进度。	灵活可控，无需引入额外依赖，适合定制复杂功能。	需要自行处理存储逻辑和兼容性。

🛠️ 两种实现方式详解

使用现成插件：hao-playVideo

有一个名为 “hao-playVideo” 的 UniApp 插件，它直接支持记录和提示历史播放时间。

引入插件
首先，你需要在项目的 manifest.json 文件中确保勾选了 VideoPlayer 模块。然后，通过 DCloud 插件市场安装该插件。
使用组件
在页面中引入并使用该组件。你需要将视频链接和记录的上次播放时间传递给组件。
```
<template><view><hao-playVideo ref="haoPlayVideo" :videoUrl="videoUrl" :historyTime="lastPlayTime"@pause="onVideoPause"></hao-playVideo></view>
</template>
```
其中，historyTime 属性就是关键，它接收一个代表秒数的值，告诉视频从哪个时间点开始播放。

保存进度
通过监听插件的 pause（暂停）或 suspend（控件处点击暂停）事件，在事件触发时获取当前播放时间并保存到本地。

<script>
export default {data() {return {videoUrl: '你的视频地址',lastPlayTime: 0 // 从本地存储中读取的上次播放时间};},methods: {onVideoPause() {// 通过ref获取当前播放时间，并保存let currentTime = this.$refs.haoPlayVideo.currentVideoTime();uni.setStorageSync('lastPlayTimeKey', currentTime);}},onLoad() {// 页面加载时，从本地存储读取上次保存的进度this.lastPlayTime = uni.getStorageSync('lastPlayTimeKey') || 0;}
}
</script>

手动实现播放记录

如果希望更灵活地控制逻辑，或者项目结构简单，也可以基于 UniApp 的原生能力自行实现。

模板与视频上下文
在模板中使用 video 组件，并为其指定一个 id。同时，利用 bindtimeupdate 事件来监听播放进度的变化。

<template><view><video id="myVideo" :src="videoUrl" controls @timeupdate="onTimeUpdate"@pause="savePlayProgress"></video></view>
</template>

在脚本中，你需要创建视频上下文来控制视频。

<script>
export default {data() {return {videoUrl: '你的视频地址',currentTime: 0};},onReady() {// 创建视频上下文this.videoContext = uni.createVideoContext('myVideo');},onLoad() {// 加载保存的进度const savedTime = uni.getStorageSync('videoProgressKey');if (savedTime) {// 注意：直接跳转可能在H5或部分平台生效，小程序中通常需要通过VideoContext操作// 更可靠的做法是在视频元数据加载好后跳转this.currentTime = savedTime;setTimeout(() => {this.videoContext.seek(savedTime);}, 500); // 稍作延迟，确保视频上下文准备就绪}},methods: {onTimeUpdate(e) {// 实时更新当前播放时间，但为了性能，不必每次都存Storagethis.currentTime = e.detail.currentTime;},savePlayProgress() {// 在暂停时保存进度uni.setStorageSync('videoProgressKey', this.currentTime);}}
}
</script>

这里通过 bindtimeupdate 事件来监听播放进度的变化，并在暂停时保存进度。

💡 重要提示与优化建议

在实际开发中，有几个关键点需要注意，这能帮你避免不少坑：

存储策略：timeupdate 事件触发非常频繁，不建议在每次触发时都直接写入本地存储，这可能导致性能问题。更好的做法是设置一个定时器，比如每5秒保存一次，或者在视频暂停、退出页面时再保存。
精准跳转：在视频加载后直接使用 videoContext.seek() 跳转到历史进度可能失败，因为视频可能还未完全加载。可以尝试在 video 组件的 loadedmetadata 事件触发后再执行跳转，或者设置一个重试机制。
多视频区分：如果小程序内有多个视频，存储时需要为每个视频生成一个唯一的 key（例如，使用视频ID），避免播放记录互相覆盖。
平台差异：video 组件在不同平台（微信小程序、H5、App）的实现存在差异。务必在真机上进行全面测试，特别是 seek 操作和上下文创建。
清理策略：考虑在用户看完视频（触发 ended 事件）后，清除对应的播放记录，以免下次播放时又从中间开始。