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