需求

项目上要求用一个视频做背景， 给到的文件是一个4k的若干秒视频，webui设计图1080p, 且没有提供个其他分辨率资料， 故根据屏幕分辨率动态缩放

<template>
  <div class="index-root">

    <div class="index-video-bg">
      <video autoplay muted loop :style="getVideoScale()">
        <source src="@/assets/video/bg_4k.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
      </video>
    </div>

  </div>
</template>

.index-root {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  justify-content: center;

  .index-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;

    video {
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }
  }
}

computed: {
    getVideoScale() {
      return () => {
        if (this.videoScale && this.videoScale > 0) {
          return 'transform: translate(-50%, -50%) scale(' + this.videoScale + ');';
        }
        return '';
      };
    },
  },


   mounted() {
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
    let number1 = screenWidth / 3840;
    let number2 = screenHeight / 2156;
    if (number1 < 1.0 || number2 < 1.0) {
      this.videoScale = Math.max(number1, number2);
    }

  },

大致流程便是如此， 实际使用还需要完善一些其他逻辑！！！