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

html：

?

1 2 3 4 5 6 7 8 9 10 11

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

js：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

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');   },   onLoad() {     // 调用接口取到该用户播放的位置（秒）     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：

?

1 2 3 4 5 6 7 8 9 10

.content {   display: flex;   flex-direction: column;   align-items: center;   justify-content: center; }   .video {     width: 100%; }

　

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