vue实现全屏登录视频背景并适配浏览器窗口大小

问题描述：接到一个需求，需要把登录页背景做成一个全屏的视频播放，并且能够根据浏览器窗口大小做到实时适配。

1.HTML结构

首先用一个最外层容器包裹整个登陆页面，最外层容器使用flex布局，有利于窗口和浏览器比例大小发生改变盒子伸缩以及登录容器实现水平垂直居中显示，视频背景盒子使用固定定位在整个页面容器，设置z-index使其层级最低。

<template>
  <div class="login-page">
        <!-- 此处图片用于当视屏加载失败时的替换背景图片 -->
    <img v-if="!vedioCanPlay" class="login-background" :src="configurationData.backgroundImage" />
    <div class="login-content">
      <!-- 此处内容放置中间登录模块 -->
    </div>
    <div class="videoContainer">
      <video
        :style="fixStyle"
        class="fillWidth"
        playsinline=""
        autoplay=""
        muted=""
        loop=""
        v-on:canplay="canplay"
      >
        <source src="@/assets/images/login/background.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

2.css样式部分

最外层容器使用flex布局方便登录模块实现水平垂直居中显示，视屏容器和背景图片使用fixed固定定位使其脱离文档流占据整个屏幕大小，设置层级为最低。

<style lang="scss" scoped>
  .login-page {
    background-size: cover;
    background-attachment: scroll;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-background {
    width: 100%;
    display: block;
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    z-index: -99;
  }
//根据需求自行修改这个类名的样式，其他样式必须添加
  .login-content {
    width: 640px;
    height: 780px;
    z-index: 2;
    left: 600px;
    top: 230px;
    border-width: 0px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 2px;
    border: none;
    box-shadow: none;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .videoContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
  }

  .videoContainer:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(25, 29, 34, 0.65);
  }
  .fillWidth {
    width: 100%;
  }
  
</style>

3.js适配部分

当页面元素渲染后给窗口添加监听，屏幕尺寸发生改变时实时给播放器设置样式使其达到适配效果

<script>
  export default {
    data() {
      return {
        vedioCanPlay: false, //控制视屏加载状态显示图片
        fixStyle: ''  //屏幕发生变化时给播放器设置的样式
      }
    },
    mounted() {
      this.getVideoStyle()
    },
    methods: {
      //视屏播放失败展示背景图片
      canplay() {
        this.vedioCanPlay = true
      },
      //监听屏幕大小实时给播放器设置宽高
      getVideoStyle() {
        window.onresize = () => {
          const windowWidth = document.body.clientWidth
          const windowHeight = document.body.clientHeight
          const windowAspectRatio = windowHeight / windowWidth
          console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
          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>

4.实现效果展示

由于上传视频限制，仅截图展示静态实现效果