vue播放视频

<template>
  <div class="playVideo">
    <div class="container" ref="container">
      <video  ref="video" src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4" class="videws" poster=""></video>
      <div class="control">
        <i :class="videoClassForm.switchClass" id="switch" @click="switchBtn">开启暂停</i>
        <div class="process" @click="processLineBtn" ref="process">
          <div ref="bar" class="bar">进度条</div>
        </div>
        <div class="time">
          <span>{{currenttime}}</span> /
          <span>{{durationtime}}</span>
        </div>
        <!-- <i class="icon icon-sound sound"></i> -->
        <i class="icon icon-fullscreen full" id="full" @click="fullBtn">全屏</i>
      </div>
    </div>
 </div>
</template>

<script>
export default {
  data () {
    return {
      currentVideo: '',
      video: undefined,
      videoClassForm: {
        switchClass: 'icon icon-play switch'
      },
      currenttime: '00:00:00',
      durationtime: '00:00:00',
      videoTime: undefined,
      barWidth: '',
      num: 1,
      flag: true
    }
  },
  created () {
  },
  mounted () {
    this.video = this.$refs.video
    this.getVideoDura()
  },
  updated () {
    this.video = this.$refs.video
    this.getVideoDura()
  },
  methods: {
    // 获取视频总时长
    getVideoDura () {
      var vid = this.video
      setTimeout(() => {
        var total = vid.duration
        this.durationtime = this.getTime(total)
      }, 800)
    },
    // 播放视频的开关
    switchBtn () {
      let video = this.video
      if (video.paused) {
        this.getVideoCurrent()
        video.play()
        this.videoClassForm.switchClass = 'icon icon-pause switch'
      } else {
        video.pause()
        clearInterval(this.videoTime)
        this.videoClassForm.switchClass = 'icon icon-play switch'
      }
    },
    // 获取视频播放的进度
    getVideoCurrent () {
      var that = this
      this.videoTime = setInterval(function () {
        if (that.getTime(that.video.currentTime) == that.durationtime) {
          that.videoClassForm.switchClass = 'icon icon-play switch'
          that.$refs.bar.style.width = '100%'
          clearInterval(that.videoTime)
        } else {
          that.currenttime = that.getTime(that.video.currentTime)
          that.barWidth = that.$refs.process.offsetWidth * that.video.currentTime / that.video.duration
          that.$refs.bar.style.width = that.barWidth / 100 + 'rem'
        }
      }, 200)
    },
    // 进度条点击
    processLineBtn (e) {
      this.num += 1
      if (this.num > 1) {
        localStorage.setItem('barWidth', this.barWidth)
      }
      var losW = undefined
      if (localStorage.getItem('barWidth')) {
        losW = parseFloat(localStorage.getItem('barWidth'))
      }
      if (e.offsetX < losW) { //
        this.currenttime = this.getTime(this.video.duration * e.offsetX / this.$refs.process.offsetWidth)
        this.video.currentTime = this.video.duration * e.offsetX / this.$refs.process.offsetWidth
      } else if (e.offsetX > this.barWidth && e.offsetX < losW) {
        this.currenttime = this.durationtime * e.offsetX / this.$refs.process.offsetWidth
      } else if (e.offsetX > this.barWidth) {

      }
    },
    // 全屏按钮
    fullBtn () {
      if (this.flag) {
        this.flag = false
        this.$refs.container.style.height = '100%'
        this.video.style.width = '100%'
        this.video.style.height = '100%'
      } else {
        this.flag = true
        this.$refs.container.style.height = '4.24rem'
        this.video.style.width = '100%'
        this.video.style.height = '4.24rem'
      }
    },
    getTime (time) {
      var hours = Math.floor(time % 86400 / 3600)
      var minutes = Math.floor(time % 86400 % 3600 / 60)
      var seconds = Math.floor(time % 60)
      hours = hours >= 10 ? hours : '0' + hours
      minutes = minutes >= 10 ? minutes : '0' + minutes
      seconds = seconds >= 10 ? seconds : '0' + seconds

      var str = ''
      str = hours + ':' + minutes + ':' + seconds
      return str
    }
  }
}
</script>

<style scoped>
  .container {
  position: relative;
  width: 28.28vw;
  min-height: 4.24rem;
  background-color: pink;
}

.container video {
  width: 100%;
  height: 4.24rem;
  background-color: pink;
  object-fit: scale-down;
}
.container  .control {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: .3rem;
  bottom: .1rem;
  width: 90%;
  height: .3rem;
  margin: 0 auto;
  border-radius: .05rem;
  background: rgba(0, 0, 0, .5)
}
.control .switch {
  margin: 0 .1rem;
}
.control .icon {
  cursor: pointer;
  color: #fff;
  font-size: .2rem;
}
.control .process {
  width: 100%;
  height: .18rem;
  border-radius: .09rem;
  background-color: #555;
  overflow: hidden;
  cursor: pointer;

}
.control .process .bar {
  width: 0px;
  height: 100%;
  background-color: #fff;
}
.control .time {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 0 .1rem;
}
.control .full {
  cursor: pointer;
  margin-right: .1rem;
}
video::-webkit-media-controls,
video::-moz-media-controls,
video::-webkit-media-controls-enclosure{
  display:none !important;
}

video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-start-playback-button {
  display:none !important;
  -webkit-appearance: none;
}
video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-start-playback-button {
  display:none !important;
  -webkit-appearance: none;
}

.icon-sound:before {
  content: "\e900";
}
.icon-play:before {
  content: "\f04b";
}
.icon-pause:before {
  content: "\f04c";
}
.icon-resize_full:before {
  content: "\f065";
}
.icon-fullscreen:before {
  content: "\f0b2";
}
</style>