vue监听video的播放按钮

我刚开始没做封面图的时候我是直接watch监听的src的变化

 <!--
    //有问题的写法 videoInfo.LivePlayUrl是视频链接
/**
*video几个标签属性的解释：
*1、playsinline：IOS浏览器支持小窗内播放
*2、x5-playsinline：h5视频微信禁止全屏
*3、webkit-playsinline：微信浏览器支持小窗内播放
*4、preload：则视频在页面加载时进行加载，并预备播放
**/-->
    <video
      ref="viedeoPlay"
      style="width: 100%; background: #000"
      :controls="true"
      :playsinline="true"
      :webkit-playsinline="true"
      v-if="videoInfo.LivePlayUrl"
    >
      <source
        :src="videoInfo.LivePlayUrl"
        :poster="videoInfo.Poster"
        type="video/mp4"
      />
    </video>

先给video绑定好ref，设置好样式然后写监听

 watch: {
    "videoInfo.LivePlayUrl"(newVal, oldVal) {
      console.log(newVal, 'and',oldVal);
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.viedeoPlay.addEventListener("play", this.handlePlay);
        });
      }
    },
  },
  methods: {
      //点击播放之后
    handlePlay() {
      if (!this.playFlag) {//控制点击次数
        this.$refs.viedeoPlay.play();//执行监听之后的播放事件
      }
    },
  }

videoInfo.LivePlayUrl是我要渲染的src的url，拿到新值之后开始监听video的play播放事件， this.handlePlay()是我播放之后的回调事件。

如果要是放了自定义的封面图的话可以直接给封面图加事件监听，video自带的封面还是用上面的方法

//点击播放
    videoClickPlay() {
      this.$refs.videoPlay.play();
      this.videoFlag = true;
    },