video标签使用

先贴代码

 <div class="video-div" v-if="mvinfo.brs">
      <video
        :src="mvinfo.brs[1080]"
        ref="vedioEle"
        :autoplay="false"
        volume="0.5"
        :loop="true"
        controls="controls"
        :poster="mvinfo.cover"
        @click="onVideoClick"
        @pause="getVideoPause"
        @play="getVideoPlay"
        @timeupdate="timeUpdateHandler"
        @ended="endHandler"
        :muted="isMuted"
      ></video>
      <div class="video-header">
        <router-link to="/">返回首页</router-link>|
        <span>{{mvinfo.name}}</span>
      </div>
      <div class="video-tool">
        <div class="speed">
          <ul class="speed-ul">
            <li v-for="(item,index) in speedlist" :key="index" @click="chooseSpeed(item)">{{item}}</li>
          </ul>
          <span class="current">{{speed}}X</span>
        </div>
      </div>
      <div class="play-icon">
        <!-- 暂停 -->
        <i v-if="!isplay" class="iconfont iconweibiaoti--" @click="getVideoPlay"></i>
        <!-- 播放 -->
        <i v-if="isplay && !isMouseStop" class="iconfont iconzanting1" @click="getVideoPause"></i>
      </div>
    </div>

声明的定时器对象
let interval = null;

  mvinfo: {},
      isMuted: true,
      speed: 1.0,
      isplay: false,
      isMouseStop: true,
      speedlist: ["0,5", "1.0", "1.5", "2.0"]
方法:
// video点击事件
    onVideoClick() {
      this.isplay = !this.isplay;
    },
    timeUpdateHandler() {},
    // 播放结束
    endHandler() {
      this.isplay = false;
      this.$refs.vedioEle.pause();
    },
    // 点击播放icon
    getVideoPlay() {
      this.isplay = true;
      this.$refs.vedioEle.play();
    },
    // 点击暂停icon
    getVideoPause() {
      this.isplay = false;
      this.$refs.vedioEle.pause();
    },
    // 播放速度
    chooseSpeed(value) {
      this.speed = value;
      this.$refs.vedioEle.playbackRate = Number(value);
    },
    // 监听鼠标移动事件
    listenMouseMove(e) {
      this.isMouseStop = false;
    },
    async getMvDetailById() {
      this.$myLoading.open();
      const res = await HttpApi.getMvDetailByd({ mvid: this.$route.params.id });
      if (res && res.data) {
        const mvinfo = res.data.data;
        this.mvinfo = mvinfo;
        this.$myLoading.hide();
      }
    }
  },
  created() {
    this.getMvDetailById();
    // 添加监听鼠标移动事件
    interval = setInterval(() => {
      this.isMouseStop = true
    }, 3000);
    window.addEventListener("mousemove",this.listenMouseMove)
  },
  // 销毁前清楚定时器
  beforeDestroy() {
    clearInterval(interval);
  }