vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏、播放进度，话不多说直接上代码。-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏、播放进度，话不多说直接上代码。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意项目中本组件使用到了elementUI所以要确保项目中安装了

videoFree.vue

<template>
  <div ref="videoCons" style="width:100%;height:100%;" class="videCOns" @mousemove="move">
    <video @loadeddata="loadeddata" ref="videoEL" @timeupdate="upDate" :src="src" style="width:100%;height:100%;"></video>
    <div class="controsCon" :style="{opacity:opacity}">
        <div class="playBtn" @click="play">
            <img v-if="!isPlay" style="width: 30rem;height: 30rem;" src="https://xinyu22.oss-cn-beijing.aliyuncs.com/uploads/20230620/511d3a609cf5dd544e2b1142d26bcfdd.png">
            <img v-if="isPlay" style="width: 30rem;height: 30rem;" src="https://xinyu22.oss-cn-beijing.aliyuncs.com/uploads/20230620/e307ef78f36d81bceb192a010c3f403b.png">
        </div>
        <div class="volum">
            <img style="height:30rem;width: 30rem;" src="https://xinyu22.oss-cn-beijing.aliyuncs.com/uploads/20230620/fd1629b980b28212a283f2f462d69427.png">
            <div class="vCon">
                <el-slider @input="volum" v-model="volums" vertical style="height:100%;"></el-slider>
            </div>
        </div>
        <div class="allCon" @click="scaleEl">
            <img v-if="!full" style="width: 30rem;height: 30rem;" src="https://xinyu22.oss-cn-beijing.aliyuncs.com/uploads/20230620/8c191f53af505c6623b5c1a397eec42e.png">
            <img v-if="full" style="width: 30rem;height: 30rem;" src="https://xinyu22.oss-cn-beijing.aliyuncs.com/uploads/20230620/fe7d50559bbcb656e1316a0297aa1ed8.png">
        </div>
        <div class="jdt">
            <!-- v-if="!isNaN(parseInt(percent))" -->
            <el-progress
            :percentage="percent" 
            :show-text="false"></el-progress>
        </div>
        <div style="width: 100%;height: 20rem;display: flex;align-items: center;justify-content: space-between;color: #ccc;font-size: 14rem;padding:0 60rem;box-sizing: border-box;">
            <span>{{ curJd }}</span>
            <span>{{ allTime }}</span>
        </div>
    </div>
  </div>
</template>

js部分：因此为nuxtjs开发的项目，代码中this.$fmtS是一个格式化时间的工具类代码后面有

<script>
export default {
    props:{
        src:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            video:null,
            isPlay:false,
            current:0,
            duration:0,
            volums:30,
            prefVom:0.3,
            percent:0,
            opacity:0,
            full:false,
            curJd:'00:00:00',
            allTime:'00:00:00',
            timer:null
        }
    },
    mounted(){
        this.video = this.$refs.videoEL
        this.video.volume = this.prefVom
    },
    beforeDestroy(){
        this.video.pause()
    },
    methods:{
        loadeddata(){
            const dur = this.video.duration
            this.duration = dur
            this.allTime = this.$fmtS(this.duration)
        },
        move(){
            this.opacity = 1
            this.timer && clearTimeout(this.timer)
            this.timer = setTimeout(()=>{
                this.opacity = 0
            },4000)
           
        },
        scaleEl(){
            const el = this.$refs.videoCons
            const isfull =  document.fullscreenElement ||
	                        document.msFullscreenElement ||
                            document.mozFullScreenElement ||
                            document.webkitFullscreenElement || false;
            if(!isfull){
                this.full = true
                if (el.requestFullscreen) {
                    el.requestFullscreen();
                } else if (el.mozRequestFullScreen){
                    el.mozRequestFullScreen();
                } else if (el.webkitRequestFullscreen){
                    el.webkitRequestFullscreen();
                } else if (el.msRequestFullscreen){
                    el.msRequestFullscreen();
                }
            }else{
                this.full = false
                if(document.exitFullScreen) {
                    document.exitFullScreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if(document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } 
        },
        upDate(){
            const cur = this.video.currentTime
            const dur = this.video.duration
            this.percent = (cur / dur) * 100
            this.curJd = this.$fmtS(cur)
        },
        play(){
            this.isPlay = !this.isPlay
            this.isPlay?this.video.play():this.video.pause()
            console.log(this.isPlay)
        },
        volum(e){
            this.volums = e
            this.prefVom = e / 100
            this.video.volume = this.prefVom
            console.log(this.video.volume)
        }
    }
}
</script>

css部分：文章来源地址https://www.toymoban.com/news/detail-707446.html

<style scoped>
.controsCon{
    position: absolute;
    width: 100%;
    bottom:0;
    left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.playBtn{
    height: 30px;
    width:30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right:30px;
    position: relative;
    margin-left: 60rem;
}
.playIcon{
    font-size: 30px;
}
.volum{
    height: 30px;
    width:30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right:30px;
    position: relative;
}
.vCon{
    position: absolute;
    top:-150px;
    left: 0;
    height: 150px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.volum:hover .vCon{
    opacity: 1;
}
.vCon>>> .el-slider__runway{
    background-color: #ccc;
}
.jdt{
    height: 10px;
    width: 100%;
    padding:0 60rem;
    box-sizing: border-box;
    margin:0 auto;
    margin-top:10rem;
}
.allCon{
    height: 30rem;
    width: 40rem;
    position: absolute;
    top:0;
    right: 60rem;
    cursor: pointer;
}
</style>

到了这里，关于vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏、播放进度，话不多说直接上代码。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！