vue中使用video标签禁止拖动进度条

开发过程中经常遇到一些出乎意料的事，那就简单的记录一下吧！

废话不多直接上正题。

1.在template模板里

<template>
     <div>
            <!-- 自定义video标签属性，去掉了video标签上的一些自带的控件 -->
            <video id="myVideo2" ref="videoRef" style="width: 100%;height: 100%;" controls
                            webkit-playsinline="true" controlslist="nodownload noremoteplayback disablePictureInPicture"
                            :disablePictureInPicture="true" poster="" :src="cont" class="myvideo" autoplay
                            @timeupdate="timeUpdate" :currentTime="currentTimenew" @error="videoError"
                            @ended="VideoEnded" objectFit='cover' enable-progress-gesture='false'>
           </video>
     </div>
<template>

目前使用的是vue2

exprot default(){

      data() {
        return {
             newsschedule: 0, //当前观看视频进度
             currTime: null,
             maxTime: 0,
             initialtime:0,//记录用户观看时长

        }
    },
        created(){
             this.initialtime = this.$route.query.initialtime   //视频记录时间
          setTimeout(() => {//加载的太快使用了一个异步操作
            this.videoContext = document.getElementById("myVideo2");
            if (this.initialtime > 0) {
                // this.videoContext.currentTime = 0
                this.videoContext.currentTime = this.initialtime
                this.timeStamp1 = this.initialtime
            }
        }, 500)


       },
        
        methods:{

           timeUpdate(e) {//获取当前播放时间 duration
            // console.log(e)
            if (this.timeStamp != parseInt(e.target.currentTime)) {
                this.allTime = parseInt(e.target.duration) //视频总时长（秒）
                //对播放的时间进行整
                this.timeStamp = parseInt(e.target.currentTime) //播放进度 (秒)
                this.biNum = Math.floor(this.timeStamp / this.allTime * 10000) / 100   //暂时没用到
                this.currentTime = e.target.currentTime
                if (this.newsschedule < 90) {
                    //this.newsschedule 请求接口获取的参数就是判断当前观看的时长是否小于90 小于90就禁止拖动进度条
                          
                    if (e.srcElement.currentTime - this.currTime > 3) {
                        //这里拖动进度条时间 - 当前观看的时长 > 3秒 这边判定它为拖动进度条
                        e.srcElement.currentTime = this.currTime > this.maxTime ? this.currTime : this.maxTime;
                        let newsVal = this.initialtime
                        if (newsVal) {
                            this.videoContext.currentTime = newsVal
                        }
                        //当前用户记录观看时间 大于 实施播放时间
                        if (this.currTime > newsVal) {
                            this.videoContext.currentTime = this.currTime
                        }
                        // console.log("快进了");
                        this.$message({
                            message: '该课程第一次观看不能快进',
                            type: "warning",
                            customClass: 'messageindex'
                        });
                    }
                    this.currTime = e.srcElement.currentTime;
                    this.maxTime = this.currTime > this.maxTime ? this.currTime : this.maxTime;
                }
            }
        },
        //视频播放完毕
        VideoEnded(e) {
            console.log('视频加载完毕做出相应的操作');
        },
        videoError(e) { // 视频加载失败事件
            // //console.log(e);
            this.$message({
                message: '视频加载失败',
                type: "error",
            });

        },
      },

}

e.srcElement.currentTime - this.currTime > 3

注意：这里根据需求最大可接受快进的秒数