Vue移动端video的控制条禁止拖动快进（兼容Android和ios）

最近公司做一个刷课时的项目，要求在移动端禁止拖动进度条，并有记录播放时间功能，找个了各种方法，整合记录一下。

HTML：

      

methods方法： 

XXX () {

        var that = this;
        var resetTime = 0; // 拖动后重置播放时间
        var curTime = 0;  // 当前播放时间
        var vd = document.getElementById("video"); //获取video对象
        var getCurTime = localStorage.getItem('remTime'); //获取本地存储
        if ( getCurTime > 0.1) {
                curTime = getCurTime;
                resetTime = getCurTime;
                vd.addEventListener('play',function(){
                        setTimeout(function(){
                                vd.currentTime = getCurTime;
                                setInterval(timer,100)
                        },2000)
                })
        } else {
                vd.play();
                setInterval(timer,100)
        }

        // 定时器
        function timer () {
                curTime = vd.currentTime;
                var apartTime = curTime - resetTime;
                if(apartTime > 2) {
                        vd.currentTime = resetTime;
                } else {
                        resetTime = curTime;
                }
                that.curTime = curTime;
        }

        vd.addEventListener('pause',function(){
                localStorage.setItem('remTime',that.curTime);
        })
},