vue video 自定义

              
              
              

                  
                  

                      
                      
{{vcIsPlay?'stop':'play'}}
                      
                      
{{vcCurrentTime}}/{{vcTotalTime}}
                      
                      
full
                  
                  

                      
                      
                  
              
        

data() {
        return {
            vcCurrentTime:'00:00',//当前进度
            vcTotalTime:'00:00',//总时长
            vcIsPlay:false,//video是否播放
            vcProgress:0,//video进度
            vcIsFull:false,//是否全屏
        }
    },



onPlayerPlay() {
            console.log('on player');
        },
        videoTimeUpdate(){
           var currTime =this.$refs.video.currentTime;
           var duration =this.$refs.video.duration;
           this.vcCurrentTime = this.getFormatVideoTime(currTime);
           var pre = currTime / duration;
           this.vcProgress = pre*100;
        },
        videoCanPlay(){
            var duration =this.$refs.video.duration;
            // console.log('ss',duration)
            this.vcTotalTime = this.getFormatVideoTime(duration);
        },
        //video play or stop
        videoPlay(){
           if(this.vcIsPlay){
              this.$refs.video.pause();
           }else{
              this.$refs.video.play();
           }
           this.vcIsPlay = !this.vcIsPlay;
        },
  
        //格式化时间
        getFormatVideoTime(time) {
            var time = time;
            var m = parseInt(time%3600/60),
                s = parseInt(time%60);
            m = m < 10 ? "0"+m : m;
            s = s < 10 ? "0"+s : s;
            return m+":"+s;
       }