视频播放进度记录

前言

微信小程序提供一个video组件支持视频播放，开发者文档上可以看到，该组件提供了很多可选属性，具体的可查阅微信小程序开发文档。

具体实现

为了有效记录视频的播放进度，我准备在视频播放过程中每十秒一周期、视频暂停时、视频播放结束时上报一次当前时间。使用initial-time让视频从当前时间开始进行播放。

<video class="video" autoplay="true" src="{{url}}" controls bindtimeupdate='bindtimeupdate' bindpause='bindpause' bindended='bindended' controls initial-time="{{currentTime}}"></video>

bindtimeupdate事件可以直接获取到播放视频的当前时间和总时长。每隔十秒去请求一次接口，将时间存储下来。

  bindtimeupdate(res) {
    this.data.currentTime = parseInt(res.detail.currentTime) // 当前时间
    this.data.duration = parseInt(res.detail.duration)  // 总时长
    if (this.data.flag)
      return
    this.data.flag = setInterval(this.getPlayTime, 10000); // 十秒上报一次
  }

暂停时记录一次当前时间，并清除setInterval事件，防止持续上报。bindended与bindpause事件逻辑一致。

  bindpause(e) {
    if (this.data.currentTime !== this.data.duration) {
      this.data.isEnd = false
    }
    this.getPlayTime()
    if (this.data.flag) {
      clearInterval(this.data.flag)
      this.data.flag = null
    }
  }

实现效果

在我的学习页面，可以看到每个视频的已播放进度条。

进入视频，视频从当前视频时间继续播放。