vue中使用html video标签，写中间暂停图标

一篇汇总video事件的文章，方便查阅：

https://blog.csdn.net/xuehu837769474/article/details/107532487

html部分

 <div class="content">
        <video
          width="1416"
          height="828"
           ref="videoRef" // 用来获取video所在的DOM元素****
          :poster="paramsdata.imgUrl"
          controls="controls"
          @loadstart="isactive = true" //开始获取数据
          @play="isactive = false"//开始播放前
          @pause="isactive = true"//播放暂停
          @ended="isactive = false"//播放结束后停止播放
        >
          >
          <source :src="paramsdata.video" type="video/mp4" />
        </video>
        <img :src="startImg" alt="" v-show="isactive" class="staticImg" @click="changeVideoStatus()" />//图片
        <span class="totalTime" v-show="isactive">{{
          paramsdata.totalTime
        }}</span>
      </div>

csscss用定位把图片放中间

.staticImg {
  width: 122px;
  height: 122px;
  position: absolute;
  top: calc(50% - 61px);
  left: calc(50% - 61px);
  cursor: pointer;
}

methods:{
changeVideoStatus() {
 const video = this.$refs.videoRef;
  if(video.paused) {
    video.play();
  } else {
    video.pause();
  }
},

}