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

播放按钮可以使用盒子绝对定位在视频中间,当点击时触发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;
            }
          }
        }
      }

...

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐