给video视频自定义添加中间播放按钮

实现效果：视频中间添加播放按钮，且鼠标移上去有波浪动画效果，点击可以控制视频播放

播放按钮可以使用盒子绝对定位在视频中间，当点击时触发video的播放事件，同时让盒子隐藏。

<div class="video-right">
          <video
            controls
            @pause="videoPause"
            @play="videoPlay"
            ref="myVideo"
            poster="./components/images/hp.png"
            style="width: 100%; height: 100%"
            src="https://gdvideo.southcn.com/3ee5240428ff4b4e98037322ef64ead7/8039f3657b5845ed8c5999bfe2f82c00-78c3f0ea0fed476b59b42fe6b81e019e-ld.mp4"
          ></video>
          <div
            v-if="videoPauseShow"
            class="prism-big-play-btn"
            @click="videoPlay"
          >
            <div class="outter"></div>
          </div>
        </div>

 data() {
    return {
      videoPauseShow: true,
    };
  },
 methods: {
    videoPlay() {
        //点击盒子让播放按钮隐藏
      this.videoPauseShow = false;
        //触发video的播放事件
      this.$refs.myVideo.play();
    },
  }

 .video-right {
        width: 400px;
        height: 350px;
        position: relative;
        background: #000;
        .prism-big-play-btn {
          position: absolute;
          transform: translate(-50%, -50%);
          left: 50%;
          top: 48%;
          width: 64px;
          height: 64px;
          background: url("./components/images/bigplay.png") no-repeat;
          background-size: contain;
          cursor: pointer;
          .outter {
            border: 7px solid rgba(255, 255, 255, 0.51);
            width: 64px;
            height: 64px;
            border-radius: 100%;
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
          }
          .outter:hover {
            content: "";
            width: 80px;
            height: 80px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -40px;
            margin-top: -40px;
            border-radius: 50%;
            //a1为经过@keyframes 规则建立的动画名称，可本身定义web
            // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
            // a3 为css自带的动画效果，有以下几个：
            // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
            animation: warn 1s ease-out 0s infinite;
          }
          // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
          // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
          @keyframes warn {
            0% {
              // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
              transform: scale(0.5);
              opacity: 1;
            }

            30% {
              opacity: 1;
            }

            100% {
              transform: scale(1.4);
              opacity: 0;
            }
          }
        }
      }

...

 不足之处，欢迎一起学习交流