video增加中间播放按钮

效果如下，点击播放再次点击暂停

HTML

  <div style="position: relative"  @click="changeVideoStatus()">
      <video
        :src="src"
        ref="video"
        @play="videoIsPlay = true;"
        @pause="videoIsPlay = false;"
        @ended="videoIsPlay = false;"
        loop
      >
      </video>
      <i
        class="start-play"
        v-show="!videoIsPlay"
      />
    </div>

js

  data () {
    return {
      videoIsPlay: false,
      src: ''
    }
  },
  methods: {
    changeVideoStatus () {
      const video = this.$refs.video
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
    },
  }

样式

.start-play {
  cursor: pointer;
  width: 63px;
  height: 63px;
  background: linear-gradient(135deg, #888 0%, #999 100%);
  opacity: 0.7;
  border-radius: 50%;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  &::after {
    content: "";
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-left: 19px solid white;
    position: absolute;
    top: 32%;
    left: 40%;
  }
}