video標簽 vue實戰應用

 

1. 監聽當前時間位置，並三秒輸出一次時間位置

<video @timeupdate="timeupdate" :src="視頻路徑" controls="controls" poster="封面"></video>

 data() {
　　return {
　　　　mytime_02：true，
     }
 }

//監聽播放位置
      timeupdate(e) {
        if (!this.mytime_02) {
          return;
        } //首次進入能執行
        this.mytime_02 = false;
        setTimeout(()=>{
         console.log(parseInt(e.target.currentTime), 'event')
          this.mytime_02 = true; //上次執行成功，下一次才可執行。
        }, 3000);
      },
 

 

2.跳轉到指定位置

<video  @play="play" :src="視頻路徑" controls="controls" poster="封面"></video>

 data() {
　　return { 　　　　mytime_02：true， } }

  play(){
　　 if(this.time_flag){
　　 　　this.$refs.myvideo.currentTime = 10;
　　 　　this.time_flag = false;
　　 }
  },

 

 

3.當前音頻總時長

<video ref="audio" @play="play" :src="視頻路徑" controls="controls" poster="封面"></video>

this.$refs.audio.duration