vue使用Vidage实现全屏动画视频展示

版权声明： https://blog.csdn.net/qq_27721169/article/details/82852497

首先vue导入Vidage包

npm install vidage --save   

在需要使用的页面导入

import Vidage from 'vidage'

加入样式

.Vidage__backdrop, .Vidage__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.Vidage--allow .Vidage__video {
  display: block
}

.Vidage--allow .Vidage__image {
  display: none
}

.Vidage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1
}

.Vidage, .Vidage__video {
  min-width: 100%;
  min-height: 100%
}

.Vidage__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: none
}

.Vidage__image {
  background-position: 50%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover
}

.Vidage__backdrop {
  background-color: #1b1c1d;
  background-image: url(./pattern.svg);
  opacity: .1
}

template中加入

<template>
  <div class="login-container">
    <div class="Vidage">
      <div class="Vidage__image"></div>
      <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
        <source src="XXXX.mp4" type="video/mp4">
      </video>
      <div class="Vidage__backdrop"></div>
    </div>

最后

mounted() {
    new Vidage('#VidageVideo')
  }