思路：

  1. 每次进入视频播放页面获取视频的总长度提交至后台（使用video标签中的 loadedmetadata 方法可以获取到，下面代码有使用，这个是作为提供给后台存数据库作为播放百分比的，不需要的可以忽略）
  2. 每次进入视频页面还需要加载上一次视频中已经播放到的位置进行直接跳转，这个部分数据来源于上一次播放提交至后台的记录（此处可以使用video的 initial-time 属性，可以直接指定到某一秒）
  3. 每次跳转到的时间需要和已经学习完成的时间进行比较，如果大于已学习完成时间，则无法跳转，进行提示

vue：

<video
        class="video-control"
        id="myVideo"
        @timeupdate="timeUpdate"
        :src="videoInfo.videoUrl"
        controls
        :initial-time="initial_time"
        object-fit="fill"
        play-btn-position="center"
        @ended="ended"
        @tap="videoClick"
        @loadedmetadata="loadedmetadata"
      >
</video>

js：

export default {
  data() {
    return {
      videoContext: uni.createVideoContext('myVideo', this),
      videoInfo: {},
      videoIndex: 0,
      // 视频实时时间
      initial_time: 0,
      // 视频已经播放时间
      playedTime: 0,
      // 视频实际时间
      video_real_time: 0,
      // 视频选中时间
      currentDuration: 0,
      // 视频总时长
      duration: 0,
    };
  },
  beforeDestroy() {
    // 页面销毁提交已经播放时间
  },
  methods: {
    /**
     * 获取视频总时长
     * @param {Object} data
     */
    loadedmetadata(data) {
      this.duration = data.detail.duration;
    },
    /**
     * 视频点击
     * @param {Object} e
     */
    videoClick(e) {
      
    },
    /**
     * 视频停止
     * @param {Object} e
     */
    pause(e) {
      // 记录视频已经学完
      console.log(e);
    },
    /**
     * 控制视频不能快进
     * @param {Object} e
     */
    timeUpdate(e) {
      //播放的总时长
      let duration = e.detail.duration;
      //实时播放进度 秒数
      let jumpTime = parseInt(e.detail.currentTime);
      //当前视频进度
      if (jumpTime - this.playedTime > 3) {
        // 差别过大，调用seek方法跳转到实际观看时间
        this.videoContext.seek(this.playedTime);
        wx.showToast({
          title: '未完整看完该视频，不能快进',
          icon: 'none',
          duration: 2000
        });
      } else {
        this.video_real_time = parseInt(e.detail.currentTime);
        if (this.video_real_time > this.playedTime) {
          this.playedTime = this.video_real_time;
        }
      }
      // 此处判断视频已播放完成，提交视频进度提供给后台，视频停止
      if (parseInt(this.duration) !== 0 && parseInt(this.duration) === parseInt(this.video_real_time)) {
        this.videoContext.pause();
      }
    },
    /**
     * 视频结束
     */
    ended() {
      // 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停。
      // 这里加个判断。
      if (this.playedTime < this.duration) {
        this.videoContext.play();
        // 提交视频进度提供给后台
      }
    },
  }
};

Attention：这里只提供了视频标签会使用到的方法，具体情况需要自己去处理，希望能帮到大家！！！

原文地址：http://www.cnblogs.com/zaijin-yang/p/16805026.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性