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

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

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

🛠️ 两种实现方式详解

使用现成插件：hao-playVideo

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

引入插件

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

在页面中引入并使用该组件。你需要将视频链接和记录的上次播放时间传递给组件。
vue 复制代码
```
<template>
  <view>
    <hao-playVideo 
      ref="haoPlayVideo" 
      :videoUrl="videoUrl" 
      :historyTime="lastPlayTime"
      @pause="onVideoPause"
    ></hao-playVideo>
  </view>
</template>
```
其中，historyTime 属性就是关键，它接收一个代表秒数的值，告诉视频从哪个时间点开始播放。

保存进度

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

javascript 复制代码

<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 事件来监听播放进度的变化。

vue 复制代码

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

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

javascript 复制代码

<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 事件）后，清除对应的播放记录，以免下次播放时又从中间开始。