Vue實現視頻播放（一）：使用原生方法寫一個視頻播放組件

看的是黑馬程序員的教程，記錄下來當做筆記。

HTML：

使用了video標籤

該標籤的事件：
ontimeupdate：在視頻進行播放的時候持續觸發，我們可以監聽這個事件，並在這個事件中獲取視頻的當前播放時間；
oncanplay：在視頻信息加載完畢之後觸發
總時長可以通過oncanplay獲取，但是當前播放時間需要在ontimeupdate事件中持續更新，當視頻信息加載完畢之後，會自動的觸發oncanplay事件。
該標籤的屬性：
currrentTime:可以獲取到當前視頻播放到的時間，以秒做爲單位；
duration:可以獲取到視頻的總時長，以秒做爲單位；

<template>
  <div class="video">
    <video ref="myvideo" @canplay="getTotal" @timeupdate="timeupdate" @click="showControls">
      <source src="https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4"/>
    </video>
    <transition
            enter-active-class="animated fadeIn slow"
            leave-active-class="animated fadeOut slow"
      >
    <div class="controls" v-show="isShow">
      <div class="con_left">
        <!--播放與暫停-->
        <span :class="{'icon-play3':!isPaused,'icon-pause2':isPaused}" @click="togglePlay"></span>
        <!--停止-->
        <span class="icon-stop2" @click="stopPlay"></span>
        <!--播放時間/總時長-->
        <span>{{currentTime}}/{{totalTime}}</span>
      </div>

      <div class="con_right">
        <!--聲音-->
        <span :class="{'icon-volume-low':!isMuted,'icon-volume-mute2':isMuted}" @click="toggleMuted"></span>
        <!--全屏-->
        <span class="icon-loop" @click="toggleFullScreen"></span>
      </div>
    </div>
    </transition>
  </div>
</template>

JS：

具體代碼的作用可以看註釋。

<script>
  //動畫 npm i animate.css
  import "animate.css";
  // 引入字體樣式文件
  import '../styles/style.css'
  export default {
    name: "Drive",
    data () {
      return {
        myvideo: null,

        //標記當前的播放狀態
        isPaused: false,
        //標記當前是否靜音
        isMuted: false,
        //當前播放時間
        currentTime: '00:00',
        //總時長
        totalTime: '00:00',
        //標記控制面板是否可見
        isShow: true,
        //開始時間，毫秒爲單位
        startTime: 0
      }
    },
    mounted () {
      //獲取播放器元素
      this.myvideo = this.$refs.myvideo

      //記住起始時間，這個時間可以作爲時間間隔的參照
      this.startTime = Date.now()

      //開啓一個定時器
      setInterval(() => {
        if(Date.now() - this.startTime > 5000) {
          this.isShow = false
        }
      },1000)
    },
    methods :{
      //播放與暫停
      togglePlay() {
        //console.log("click")

        //視頻標籤（video）原生方法：
        //play():讓視頻播放
        //pause():讓視頻暫停

        //修改當前的播放狀態
        this.isPaused = !this.isPaused
        if(this.isPaused) {
          this.myvideo.play()
        }else {
          this.myvideo.pause()
        }

      },
      //停止播放
      stopPlay() {
        //沒有提供原生的stop方法
        //this.myvideo.stop()
        this.myvideo.pause()
        //currentTime這個屬性就是用來標記當前視頻播放到的時間，以秒爲單位
        this.myvideo.currentTime = 0
        //重置播放狀態爲初始值
        this.isPaused = false
      },
      //時間格式化處理
      timeFormat(time) {
        let minute = Math.floor((time % 3600) / 60)
        let second = Math.floor(time % 60)
        minute = minute < 10 ? "0" + minute : minute
        second = second < 10 ? "0" + second : second
        return `${minute}:${second}`
      },
      //獲取總時長
      getTotal() {
        console.log(this.myvideo.duration)
        this.totalTime = this.timeFormat(this.myvideo.duration)
      },
      //獲取當前視頻播放到的時間
      timeupdate() {
        this.currentTime = this.timeFormat(this.myvideo.currentTime)
      },
      //靜音操作
      toggleMuted() {
        //修改圖標
        this.isMuted = !this.isMuted
        //靜音
        this.myvideo.muted = !this.myvideo.muted
      },
      //全屏切換
      toggleFullScreen(event) {
        const myvideo = this.$refs.myvideo
        //如果當前是全屏狀態，就退出全屏，否則進入全屏狀態
        //獲取當前的全屏狀態
        let isFullscreen = document.webkitIsFullScreen || document.fullscreen
        if(!isFullscreen) {
          const inFun = myvideo.requestFullscreen || myvideo.webkitRequestFullScreen
          //讓當前播放器進入全屏狀態
          inFun.call(myvideo)
        }else {
          const exitFun = document.exitFullscreen || document.webkitExitFullScreen
          //退出全屏狀態要使用document
          exitFun.call(document)
        }
      },
      //顯示控制面板
      showControls() {
        this.isShow = true
        // 一定要記得更新起始時間的參照
        this.startTime = Date.now()
      }
    }
  }
</script>