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 부분:

<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>