手写视频进度条

一，有些时候video自带的视频控件没有办法满足项目的需求，比如不想要菜单的某一个控件，但是想保留其他控件的情况，虽然可以通过伪类选择器将控件设置为none，但是经过我了解菜单控件是不可以隐藏的，欢迎大佬分享。

二，接下说一个如何使用vue+vant滑块手写一个进度条，先看效果图： img-blog.csdnimg.cn/53f5d5114b3… 1，van-slider是vant滑块组件，currentTimes 是视频当前时间，totalTime是视频总时间 ` html部分

    <div class="slider">
        <div class="play" @click="clickPlay">
            <img src="../assets/images/bofang.png" alt="" v-if="isPlay">
            <img src="../assets/images/zanting.png" alt="" v-else>
        </div>
        <van-slider v-model="value" button-size=".2rem" active-color='#00B988'                 
        :disabled='true' bar-height=".05rem" >//
            <template #button>
                <div class="custom-button"> <span></span></div>
            </template>
        </van-slider>
        <div class="videoTime">
            <span>{{ currentTimes }} / {{ totalTime }}</span>
        </div>
    </div>`
    

2，css部分 使用scss预解析 `.slider { position: absolute; left: .8rem; bottom: .45rem; width: 4.1rem; z-index: 9;

.play {
    height: .4rem;
    position: fixed;
    bottom: .28rem;
    left: .3rem;

    img {
        width: .25rem;
        height: .4rem;
    }
}

.videoTime {
    height: .33rem;
    position: fixed;
    bottom: 1rem;
    right: .3rem;

    span {
        font-weight: 500;
        color: #FEFEFE;
        font-size: .12rem;
    }
}

} `

3，js部分 clickPlay() { let video = document.getElementsByClassName('video')[0] this.isPlay = !this.isPlay if (this.isPlay) { video.play() } else { video.pause(); } }, //进度条 slider() { let video = document.getElementsByClassName('video')[0] let that = this video.oncanplay = function () { let totalTime = parseInt(video.duration) let h = parseInt(totalTime / 3600) h = h < 10 ? '0' + h : h let m = parseInt(totalTime % 3600 / 60) m = m < 10 ? '0' + m : m let s = parseInt(totalTime % 60) s = s < 10 ? '0' + s : s that.totalTime =${h}:${m}:${s}` var currentTime = null;

            that.timeout = setInterval(() => {
                currentTime = parseInt(video.currentTime) + 1
                let h = parseInt(currentTime / 60 / 60 % 24)
                h = h < 10 ? '0' + h : h
                let m = parseInt(currentTime / 60 % 60)
                m = m < 10 ? '0' + m : m
                let s = parseInt(currentTime % 60)
                s = s < 10 ? '0' + s : s
                that.currentTimes = `${h}:${m}:${s}`
                that.value = currentTime / totalTime * 100
                if (that.value >= 100) {

                    video.pause()
                    that.isPlay=false
                    clearInterval(that.timeout)

                }
            }, 1000);
        }

    },
    onS`