vue video 自定义

<div class="videoContent">
              <video id="media" @canplay="videoCanPlay()" @timeupdate="videoTimeUpdate()" src="http://baodu.aclmcj.com/video/jsgj.mp4" width="100%" heigt="100%" poster="../../assets/img/app_movie_player.png" ref="video" ></video>
              <!-- 控制器 -->
              <div class="videoControll">
                  
                  <div class="vcTop">
                      <!-- 播放按钮 -->
                      <div class="vcPlayBtn" @click="videoPlay()">{{vcIsPlay?'stop':'play'}}</div>
                      <!-- 播放时间 -->
                      <div class="vcPlayTime">{{vcCurrentTime}}/{{vcTotalTime}}</div>
                      <!-- 全屏 -->
                      <div class="vcFullBtn" @click="showFullScreen()">full</div>
                  </div>
                  <div class="vcBottom">
                      <!-- 进度 -->
                      <input type="range" @input="mySlidechange($event.target)" min="0" max="100" class="videoProgress" v-model="vcProgress" :style="{backgroundSize:+ vcProgress*100/100 +'% 100%'}"/>
                  </div>
              </div>
        </div>

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