video 动画自查每次都是重新开始播放

最新推荐文章于 2024-02-13 23:17:32 发布

xiaodunmeng

最新推荐文章于 2024-02-13 23:17:32 发布

阅读量961

点赞数 1

xiaodunemng

本文链接：https://blog.csdn.net/qq_35886411/article/details/119834372

版权

Vue.js 视频播放过渡动画 CSS关键帧组件

关键词由CSDN通过智能技术生成

        <div class="video-bg" @click="startVideo"></div>
        <div class="video-box" v-show="showSlide">
          <div class="overlay"></div>
          <div class="video" :class="{'slide':showSlide}">
            <span class="icon-close" @click="stopVideo"></span>
            <video ref="veo" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mix4/video_show.mp4" controls="controls"></video>
          </div>
        </div>

  methods: {
    stopVideo () {
      this.showSlide = false
      this.$refs.veo.pause()
    },
    startVideo () {
      this.showSlide = true
      this.$refs.veo.currentTime = 0
      this.$refs.veo.play()
    }
  },
  data () {
    return {
      showSlide: false
    }
  }

        .video-bg{
          background:url('/imgs/product/gallery-1.png') no-repeat center;
          background-size:cover;
          width:1226px;
          height:540px;
          margin:0 auto 120px;
          cursor:pointer;
        }
        .video-box{
          .overlay {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #333333;
            opacity: .4;
            z-index: 10;
          }
          .video{
            position:fixed;
            top:-50%;
            left:50%;
            transform:translate(-50%,-50%);
            z-index:10;
            width:1000px;
            height:536px;
            opacity:0;
            transition: all .6s;
            &.slide {
              top: 50%;
              opacity:1;
            }
            .icon-close {
              position:absolute;
              top:20px;
              right:20px;
              background:url('/imgs/icon-close.png') no-repeat center;
              width: 20px;
              height: 20px;
              cursor:pointer;
              z-index:11;
            }
            video{
              width:100%;
              height:100%;
              object-fit:cover; // 覆盖窗口
              outline:none;
            }
          }
        }

通过添加.slide 完成动画过度效果，用showSlide来控制是否显示

========================================================================

第二种实现方式通过定义动画，添加拥有class让他具有运动的效果

        .video-bg{
          background:url('/imgs/product/gallery-1.png') no-repeat center;
          background-size:cover;
          width:1226px;
          height:540px;
          margin:0 auto 120px;
          cursor:pointer;
        }
        .video-box{
          .overlay {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #333333;
            opacity: .4;
            z-index: 10;
          }
          @keyframes slideDown {
            from {
              top: -50%;
              opacity: 0;
            }
            to {
              top: 50%;
              opacity: 1;
            }
          }
          @keyframes slideUp {
            from {
              top: 50%;
              opacity: 1;
            }
            to {
              top: -50%;
              opacity: 0;
            }
          }
          .video{
            position:fixed;
            top:-50%;
            left:50%;
            transform:translate(-50%,-50%);
            z-index:10;
            width:1000px;
            height:536px;
            opacity: 1;
            &.slideDown {
              animation: slideDown .6s linear;
              top: 50%;
            }
            &.slideUp {
              animation: slideUp .6s linear;
            }
            .icon-close {
              position:absolute;
              top:20px;
              right:20px;
              background:url('/imgs/icon-close.png') no-repeat center;
              width: 20px;
              height: 20px;
              cursor:pointer;
              z-index:11;
            }
            video{
              width:100%;
              height:100%;
              object-fit:cover; // 覆盖窗口
              outline:none;
            }
          }
        }

  methods: {
    stopVideo () {
      this.showSlide = 'slideUp'
      this.$refs.veo.pause()
    },
    startVideo () {
      this.showSlide = 'slideDown'
      this.$refs.veo.currentTime = 0
      this.$refs.veo.play()
    }
  },
  data () {
    return {
      showSlide: ''
    }
  }

       <div class="video-bg" @click="startVideo"></div>
        <div class="video-box" v-show="showSlide">
          <div class="overlay"></div>
          <div class="video" :class="showSlide">
            <span class="icon-close" @click="stopVideo"></span>
            <video ref="veo" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mix4/video_show.mp4" controls="controls"></video>
          </div>
        </div>