uniapp video 视频未播放完成禁止拖拽进度条快进

html：

<view class="content">
    <video
      id="myVideo"
      class="video"
      @timeupdate="timeUpdate"
      @ended="ended"
      :initial-time="initialTime"
      :src="courseMsg.videos"
      :poster="courseMsg.img"
    />
</view>

js：

export default {
  data() {
    return {
      videoTime: 0, // 视频时间长度
      videoContext: '', // 用来存储video对象
      watchTime: 0, // 实际观看时间
      videoRealTime: 0, // 实时播放进度
      initialTime: 0, //该用户看到的位置
      courseMsg: {
        videos:
          'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
        img: 'https://img1.baidu.com/it/u=2374708084,3068058562&fm=26&fmt=auto'
      }
    };
  },
  onReady() {
    // 视频唯一ID
    this.videoContext = uni.createVideoContext('myVideo');
  },
  onl oad() {
    // 调用接口取到该用户播放的位置（秒）
    this.watchTime = 60;
    this.initialTime = 60;
  },
  methods: {
    timeUpdate(e) {
      //视频时长
      this.videoTime = parseInt(e.detail.duration);
      // 记录用户当前视频进度
      var jumpTime = parseInt(e.detail.currentTime);
      // 判断用户当前视频进度比实际观看时间差别，这里只判断了用户快进
      if (jumpTime - this.watchTime > 3) {
        // 差别过大，调用seek方法跳转到实际观看时间
        this.videoContext.seek(this.watchTime);
	uni.showToast({
	　　title: '未完整看完该视频，不能快进',
	　　icon: 'none',
	　　duration: 2000
	});
      } else {
        this.videoRealTime = parseInt(e.detail.currentTime);
        if (this.videoRealTime > this.watchTime) {
          this.watchTime = this.videoRealTime;
        }
      }
    },
    ended() {
      // 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停。
      if (this.watchTime < this.videoTime) {
        this.videoContext.play();
      }
    }
  }
};

css：

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video {
	width: 100%;
}

其中的watchTime和initialTime是从后台接口获取的,每一次的播放记录存储在后台,每一次打开都会去获取到上次的播放记录和已播完的部分,这样就可以轻松解决视频未播放完成不能跳过的问题了!

标签：uniapp,videoContext,视频,进度条,用户,watchTime,video,videoRealTime,播放
来源： https://www.cnblogs.com/zaijin-yang/p/16483642.html