Vue-登陆页(或其他页面)使用背景视频

在项目中修改登陆页时，登陆页的背景色只有白色，有些不好看，晚上跟产品提建议说可以仿着百度校招网站上的背景视频，在登录页添加一个背景视频。

1 百度搜索查找在首页添加视频的方法

1.1 找到了一个纯手写的方法（此处的代码均为转发）：

html：

<template>
  <div class="homepage-hero-module">
    <div class="video-container">
      <div :style="fixStyle" class="filter"></div>
      <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
        <source src="PATH_TO_MP4" type="video/mp4"/>
        浏览器不支持 video 标签，建议升级浏览器。
        <source src="PATH_TO_WEBM" type="video/webm"/>
        浏览器不支持 video 标签，建议升级浏览器。
      </video>
      <div class="poster hidden" v-if="!vedioCanPlay">
        <img :style="fixStyle" src="PATH_TO_JPEG" alt="">
      </div>
    </div>
  </div>
</template>

css：

<style scoped>
  .homepage-hero-module,
  .video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
  }
</style>

js：

<script>
  export default {
    name: 'login',
    data() {
      return {
        vedioCanPlay: false,
        fixStyle: ''
      }
    },
    methods: {
      canplay() {
        this.vedioCanPlay = true
      }
    },
    mounted: function() {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      }
      window.onresize()
    }
  }
</script>

当时按着这个方法，在个人项目中添加了代码，但是效果不好，按f12时，窗口缩小，但是视频并没有全部覆盖到整个页面，视频周围会出现空白条。

案例原网址在这里 ：https://segmentfault.com/a/1190000012867572 ；

1.2 找到了一个组件：vue-responsive-video-background-player

博客地址：博客地址
github地址：github地址

1.3 又找到了一个组件：vue-videobg

1. 安装：npm install --save vue-videobg
2. 引入并注册组件：

   import VideoBg from 'vue-videobg';
   components: {
       formLogin,
       warningUpdate,
       loginSwiper,
       VideoBg
   },

3. 使用：

   <video-bg :sources="[videoSrc1]" :img="topImg"></video-bg>

4. 官网例子：

<video-bg :sources="['demo/assets/video.mp4']" img="demo/assets/bg.jpg">
  <!-- If you want to add content here, a slot is waiting! -->
</video-bg>

感觉官网的例子给的很简单，:sources="['demo/assets/video.mp4']" 这个值接收的是一个视频数组；这个值img="demo/assets/bg.jpg" 是视频未加载好时，出现的背景图；
结果是完美运行的，挺好的，产品也说不错 哈哈
博客写的很仓促，大部分是转发，后续会有补充的；