vue视频居中显示图标

vue yekong

要求:video在没有播放视频的时候,视频中间要显示播放按钮,播放时,隐藏播放按钮。
vue视频居中显示图标

        <div class="videoBox" v-if="data.contentType==2">
          <video style="object-fit: fill; width: 100%; height: 100%" :poster="data.videoImg"
                 id="video" @play="videoIsPlay = true;"
                 @pause="videoIsPlay = false;"
                 @ended="videoIsPlay = false;"
                 class="shipin" controls="controls">
            <source :src="data.videoUrl" type="video/mp4"/>
          </video>
          <img class="icon_play" v-if="!videoIsPlay" src="../assets/img/icon_play.png" alt="">
        </div>
videoIsPlay: false,

.videoBox {
  width: 100%;
  height: calc(100% - 70px);
  position: relative;
}

.icon_play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10000;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  pointer-events: none;
}
喜欢