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

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

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

️ 两种实现方式详解

使用现成插件：hao-playVideo

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

1. 引入插件
   首先，你需要在项目的 manifest.json 文件中确保勾选了 VideoPlayer 模块。然后，通过 DCloud 插件市场 安装该插件。

2. 使用组件
   在页面中引入并使用该组件。你需要将视频链接和记录的上次播放时间传递给组件。

   其中，historyTime 属性就是关键，它接收一个代表秒数的值，告诉视频从哪个时间点开始播放。

3. 保存进度
   通过监听插件的 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 的原生能力自行实现。

1. 模板与视频上下文
   在模板中使用 video 组件，并为其指定一个 id。同时，利用 bindtimeupdate 事件来监听播放进度的变化。
   在脚本中，你需要创建视频上下文来控制视频。

   <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) {
     // 实时更新当前播放时间，但为了性能，不必每次都存Storage
     this.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 事件）后，清除对应的播放记录，以免下次播放时又从中间开始。