手写视频进度条

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

二，接下说一个如何使用vue+vant滑块手写一个进度条，先看效果图：

接下来直接上代码：

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

三，以上就是vue+vant制作进度条的所有代码，喜欢的可以点赞收藏，欢迎大佬指出问题。