vue 簡單video組件開發

<template>
  <div id="videoPage">
    <video id="My_video" src="../../../static/img/login/bg.mp4" webkit-playsinline playsinline ref="video" @click="playVideo"></video>
    <div class="video-controls">
      <div class="video-time fl"> <!-- 時間進度條 -->
        <span>{{currentTime || '00:00:00'}}</span>&nbsp;/&nbsp;<span>{{duration || '00:00:00'}}</span>
      </div>
      <div class="video-fullSScreen fr">
        <i v-show="!isFullScreen" class="iconfont icon-fullScreen fullScreen" @click="fullScreen"></i>
        <i v-show="isFullScreen" class="iconfont icon-toSmall smallScreen" @click="smallScreen"></i>
      </div>
      <div class="video-progressbar">
        <div class="video-bar" ref="progressBar">
          <span class="video-played-progress" ref="progress"></span>
          <span class="video-circle" ref="circle"></span>
        </div>
      </div>
    </div>
    <!-- 開始暫停按鈕 -->
    <div class="video-operation animated fadeIn" v-show="play || pause">
      <div class="video-play video-btn" v-show="play">
        <i class="iconfont icon-play"></i>
      </div>
      <div class="video-pause video-btn" v-show="pause">
        <i class="iconfont icon-pause"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'videoPage',
  data () {
    return {
      videoEle: '', // video元素
      play: false, // 播放
      pause: false, // 暫停
      isFullScreen: false, // 是否處於全屏狀態
      duration: '', // 總時長
      currentTime: '', // 當前播放時間
      startX: '' // 拖動的起始X座標
    }
  },
  mounted () {
    this.$nextTick(() => {
      let that = this
      // 獲取元素
      let video = that.$refs.video
      that.videoEle = video
      let progress = that.$refs.progress
      let circle = that.$refs.circle
      let progressBar = that.$refs.progressBar
      // 獲取播放時長
      video.addEventListener('loadedmetadata', () => {
        that.duration = that.converTime(video.duration)
      })
      // 當前時間& 更新進度條
      video.addEventListener('timeupdate', () => {
        that.currentTime = that.converTime(video.currentTime)
        let percentTage = ((video.currentTime / video.duration).toFixed(4)) * 100 + '%'
        progress.style.width = percentTage
        circle.style.left = percentTage
      })
      // 點擊進度條，改變進度
      progressBar.onclick = (e) => {
        let offsetX = e.offsetX
        let width = e.target.offsetWidth
        let percentage = offsetX / width
        video.currentTIme = video.duration * percentage
        that.currentTime = that.converTime(video.currentTime)
      }
      // 播放完成後顯示暫停圖標
      video.addEventListener('ended', () => {
        that.pause = true
        setTimeout(() => {
          that.pause = false
        }, 2000)
      })
    })
  },
  methods: {
    // 點擊video，控制播放
    playVideo: function (e) {
      let that = this
      let video = e.currentTarget
      if (video.paused) {
        video.play()
        // 顯示圖標
        that.pause = false
        this.play = true
        // 圖標消失
        setTimeout(() => {
          that.play = false
        }, 2000)
      } else {
        this.play = false
        video.pause()
        this.pause = true
        setTimeout(() => {
          that.pause = false
        }, 2000)
      }
      return false
    },
    // 點擊全屏播放
    fullScreen: function () {
      let video = this.videoEle
      if (video.requestFullscreen) {
        video.requestFullscreen()
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen()
      } else if (video.webkitRequestFullScreen) {
        video.webkitRequestFullScreen()
      }
      this.isFullScreen = true
    },
    // 返回小屏播放
    smallScreen: function () {
      let video = this.videoEle
      if (video.exitFullscreen) {
        video.exitFullscreen()
      } else if (video.msExitFullscreen) {
        video.msExitFullscreen()
      } else if (video.mozCancelFullScreen) {
        video.mozCancelFullScreen()
      } else if (video.oRequestFullscreen) {
        video.oCancelFullScreen()
      } else if (video.webkitExitFullscreen) {
        video.webkitExitFullscreen()
      }
      this.isFullScreen = false
    },
    // 格式化時間
    converTime: function (secondTime) {
      let time1 = ((parseInt(secondTime) / 100)).toString()
      let time2 = time1.split('.')[1] ? (time1.split('.')[1].length === 1 ? time1.split('.')[1] + '0' : time1.split('.')[1]) : '00'
      let time = '00' + ':' + time2
      if (parseInt(secondTime) > 60) {
        let second = ((parseInt(secondTime) % 60) / 100).toString()
        let min = (parseInt(secondTime / 60) / 100).toString()
        let time3 = second.split('.')[1] ? (second.split('.')[1].length === 1 ? second.split('.')[1] + '0' : second.split('.')[1]) : '00'
        let time4 = min.split('.')[1] ? (min.split('.')[1].length === 1 ? min.split('.')[1] + '0' : min.split('.')[1]) : '00'
        time = time4 + ':' + time3
      }
      return time
    }
  }
}
</script>

<style lang='stylus' scoped rel='stylesheet/stylus'>
  @import "../../../static/css/mixin.styl"

  #videoPage
    full-size()
    position: relative
    video
      full-size()
    .video-controls
      padding: 0 .18rem 0 .28rem
      position: absolute
      bottom: 0
      left: 0
      /* 設置最大值，全屏時顯示 */
      z-index: 2147483647
      width: 100%
      height: .52rem
      color: #ffffff
      background-color: rgba(0, 0, 0, .5)
      .video-time
        margin-top: .16rem
        height: .2rem
        line-height: .2rem
        font-family: 'Helvetica'
        font-size: .168rem
        color: #ffffff
      .video-fullSScreen
        margin-top: .14rem
        .fullScreen
          font-size: .24rem
        .smallScreen
          font-size: .26rem
      .video-progressbar
        padding: 0 .367rem 0 .27rem
        position: relative
        height: 100%
        overflow: hidden
        .video-bar
          position: relative
          margin-top: .25rem
          height: .02rem
          background-color: #ffffff
          .video-circle
            absolute-50()
            height: .15rem
            width: @height
            border-radius: 50%
            background-color: #f3ce3e
            left: 0
          .video-played-progress
            position: absolute
            top: 0
            left: 0
            height: .02rem
            width: 0
            background-color: #f3ce3e
    /* 按鈕 */
    .video-operation
      absolute-50()
      width: .87rem
      height: @width
      border-radius: 50%
      background-color: rgba(0, 0, 0, .64)
      .video-btn
        full-size()
        text-align: center
        color: #ffffff
        line-height: .87rem
      .video-pause, .video-play
        i
          font-size: .38rem
      /* .video-play
        i
          font-size: .38rem */
</style>

// 佈局只兼容iPad