Vue2 自定义video样式

具体实现，请看如下代码详解，

<template>
  <div>
    <div style="width: 100%; height: 50px"></div>

    <div class="player">
      <video id="myVideo" ref="video" src="../assets/video/sintel.mp4"></video>

      <div class="controls">
        <!-- 播放/暂停 -->
        <a ref="isPlay" @click="playAndPause" class="switch"></a>
        <!-- 全屏 -->
        <a ref="expand" class="expand" @click="fullScreen"></a>
        <!-- 进度条 -->
        <div ref="progress" class="progress" @click="jumpProgress">
          <div ref="loaded" id="loaded" class="loaded"></div>
          <div class="line"></div>
          <div class="bar"></div>
        </div>
        <!-- 时间 -->
        <div class="timer">
          <span ref="currPlayTime" class="current">{{currPlayTime}}</span>
          <span ref="totalTime" class="total">{{totalTime}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalTime: null,
      currPlayTime: '00:00:00'
    };
  },
  computed: {},
  mounted() {
    this.videoPlay();
  },
  methods: {

    // 进入视频状态
    videoPlay() {
      let self = this

      // 当视频可以播放的时候
      this.$refs.video.oncanplay = function () {
        this.style.display = "block";                        // 显示视频  
        self.totalTime = self.getFormatTime(this.duration);  // 显示视频总时长
      };

      // 播放进度
      this.$refs.video.ontimeupdate = function () {
        let currTime = this.currentTime;
        let duration = this.duration;

        let pre = (currTime / duration) * 100 + "%";         // 百分比

        let loaded = document.getElementById("loaded");
        loaded.style.width = pre;                            // 显示进度条
        
        self.currPlayTime = self.getFormatTime(currTime);    // 显示当前播放进度时间
      };

      // 播放完毕还原设置
      this.$refs.video.onended = function () {
        let loaded = document.getElementById("loaded");
        loaded.style.width = "0%";                           //进度条为0
        this.currentTime = 0
      };
    },

    // 获取视频总时长
    getFormatTime(time) {
      var time = time || 0;
      var h = parseInt(time / 3600);
      var m = parseInt((time % 3600) / 60);
      var s = parseInt(time % 60);
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      return h + ":" + m + ":" + s;
    },

    // 播放/暂定
    playAndPause() {
      let myVideo = document.getElementById("myVideo");
      if (myVideo.paused) {
        myVideo.play();
      } else {
        myVideo.pause();
      }
    },

    // 跳跃播放
    jumpProgress(e) {
      let myVideo = document.getElementById("myVideo");
      var event = e || window.event;
      myVideo.currentTime =
        (event.offsetX / this.$refs.progress.offsetWidth) * myVideo.duration;
    },

    // 全屏
    fullScreen(){
      this.$refs.video.webkitRequestFullScreen();
    }
  },
};
</script>

<style scoped>
body {
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
}
a {
  text-decoration: none;
}
.player {
  width: 720px;
  height: 360px;
  margin: 0 auto;
  background: #000 url(../assets/video/loading.png) center/300px no-repeat;   /* 加载中动画 */
  background-size: 48px 48px;
  background-repeat: no-repeat;
  position: relative;
}
video {
  display: none;
  height: 100%;
  margin: 0 auto;
}
.controls {
  width: 720px;
  height: 40px;
  background-color: #2196f3;
  position: absolute;
  left: 0;
  bottom: -40px;
  z-index: 99;
  opacity: 0.7;
}
.switch {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 11px;
  left: 11px;
  background-image: url(../assets/video/play.png);                   /* 播放按钮 */
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
.switch:hover {
  color: blue;
}
.expand {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #fff;
  position: absolute;
  right: 11px;
  top: 11px;
  background-image: url(../assets/video/expand.png); 
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
.expand:hover {
  color: blue;
}
.progress {
  width: 430px;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #555;
  cursor: pointer;
  position: absolute;
  top: 16px;
  left: 45px;
}
.loaded {
  width: 0;
  height: 100%;
  background-color: blue;
}
.line {
  width: 0;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.bar {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.timer {
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 490px;
  top: 11px;
  color: #fff;
  font-size: 14px;
}
</style>