编写自己的vue视频播放组件

<template>
    <div class="v_coBox" @mouseover="moveIn=true" @mouseleave="moveIn=false">
        <video class="pvideo" preload oncanplay @click="play" ref="vPlay" :src="vUrl" webkit-playsinline playsinline></video>
        <div class="stopvBox" @click="play" v-if="showPause">
            <!-- <span>播放</span> -->
            <img class="spImg" src="../images/pVideo.png" alt="">
        </div>
        <!--控制条（移动端不需要可注掉）-->
        <!-- <div class="biggerBtn" v-if="moveIn">
            <p class="progressTime fl">{{proTime}}</p>
            <span class="proBar" ref="wTh" @click="changeTime">
                <b :style="{width:percentage+'px'}"></b>
                <i class="proOption" ref="proCire" :style="{left:percentage+'px'}"></i>
            </span>
            <p class="allTime">{{allTime}}</p>
            <p class="fullPage"><img @click="fullPageVideo" src="../assets/images/full.png"></p>
        </div> -->
    </div>
</template>

<script>

export default {
    name:'videoPlay',
    data(){
        return{
            showPause:true,//显示暂停按钮
            moveIn:false,//显示底部控制条
            allTime:0,//总时间
            proTime:'00:00',//进度时间
            percentage:0//进度加载宽度
        }
    },
    props:{
        vUrl:''
    },
    methods:{
        play(){
            const video = this.$refs.vPlay;
            video.webkitRequestFullScreen();
            if(video.paused){
                video.play();
                this.showPause = false;
            }else{
                video.pause();
                this.showPause = true;
            };
        },
        //计算进度时间
        timeStamp(second_time){
            var time1 = ((parseInt(second_time)/100)).toString();
            var time2 = time1.split(".")[1]? (time1.split(".")[1].length == 1 ? time1.split(".")[1]+'0' : time1.split(".")[1]) :'00';       
            var time = '00' + ':' + time2;  
            if( parseInt(second_time )>= 60){
                var second = ((parseInt(second_time) % 60)/100).toString();  
                var min = (parseInt(second_time / 60)/100).toString();
                var time3 = second.split(".")[1]? (second.split(".")[1].length == 1 ? second.split(".")[1]+'0' : second.split(".")[1]) :'00'; 
                var time4 = min.split(".")[1]? (min.split(".")[1].length == 1 ? min.split(".")[1]+'0' : min.split(".")[1]) :'00'; 
                time = time4 + ":" + time3;       
            };
            return time;
        },
        changeTime(e){
            const wTh = this.$refs.wTh;
            const video = this.$refs.vPlay;
            e.stopPropagation();
            e = e || window.event
            const time = e.offsetX/wTh.offsetWidth*video.duration;
            this.percentage = e.offsetX;
            video.currentTime = time;
        },
        fullPageVideo(){
            const video = this.$refs.vPlay;
            video.webkitRequestFullScreen();
        }
    },
    mounted(){
        this.$nextTick(()=>{
            const video = this.$refs.vPlay;
            //播放结束
            video.addEventListener('ended',()=>{
                this.showPause = true;
                // console.log('播放完毕');
            });
            //视频总时间
            video.addEventListener('loadedmetadata',()=>{
                let time = video.duration;
                this.allTime = this.timeStamp(time);
            });
            //视频进度时间
            video.addEventListener('timeupdate',()=>{
                try{
                    const wTh = this.$refs.wTh.offsetWidth;
                    let time = video.currentTime,alltime = video.duration;
                    let percentage = (time / alltime) * wTh;
                    this.proTime = this.timeStamp(time);
                    this.percentage = percentage;
                }catch(e){}
            });
        })
    }
}
</script>

<style>
.v_coBox{
    position: relative;
    width: 100%;
    height: 100%;
}
.v_coBox .pvideo{
    width:100%;
    height: 100%;
    background-color: #000;
}
.v_coBox .stopvBox{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    cursor: pointer;
    height: 100%;
    background-color: rgba(0,0,0,.4);
}
.v_coBox .stopvBox>.spImg{
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    color:#fff;
    text-align: center;
    font-size:1rem;
    cursor:pointer;
    /* background:rgba(0,140,238,0.9); */
    width: 1rem!important;
    height: 1rem!important;
}
.v_coBox .biggerBtn{
    position: absolute;
    font-size: 1rem;
    bottom:0;
    left:0;
    width: 100%;
    color: #fff;
    padding: 0 6px;
    /* height: 18px; */
    box-sizing: border-box;
}
.v_coBox .biggerBtn .allTime{
    position: absolute;
    right: 28px;
    top: 0;
}
.v_coBox .biggerBtn .fullPage{
    position: absolute;
    right: 6px;
    top: -3px;
}
.v_coBox .biggerBtn .fullPage>img{
    display: inline-block;
    width: 14px;
    vertical-align: middle;
    margin-top: 3px;
    cursor: pointer;
}
.v_coBox .biggerBtn .proBar{
    display: inline-block;
    height: 2px;
    margin-left: 10px;
    width: 60%;
    background-color: rgba(255,255,255,.3);
    border-radius: 2px;
    position: relative;
    vertical-align: middle;
    margin-bottom: 3px;
    cursor:pointer;
}
.v_coBox .biggerBtn .proBar b{
    display: inline-block;
    height: 2px;
    background-color: #008CEE;
    position: absolute;
    top: 0;
    left: 0;
}
.v_coBox .biggerBtn .proBar .proOption{
    position: absolute;
    top: -4px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
</style>