Vue使用原生方式把视频当作背景

文章目录

[1. 首先我们先把布局写入：](#1. 首先我们先把布局写入：)
2.接下来我们要根据屏幕对视频进行自适应处理
[3. 此时有人会想Vue是不需要操作Dom元素的，那原生怎么适配，那么就来一个原生写法](#3. 此时有人会想Vue是不需要操作Dom元素的，那原生怎么适配，那么就来一个原生写法)
特别注意：由于视频不能写为背景，需用z-index来区分元素层级

1. 首先我们先把布局写入：

javascript 复制代码

<div class="video-container">
   <video :style="fixStyle" autoplay loop muted class="fillWidth" :canplay="canplay" >
     <source src="../assets/test.mp4" type="video/mp4" />
     <!-- 浏览器不支持 video 标签，建议升级浏览器。 -->
     <source src="../assets/test.mp4" type="video/webm"/>
     <!-- 浏览器不支持 video 标签，建议升级浏览器。 -->
    </video>
  </div>
</div>

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

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

.fillWidth {
  width: 100%;
}
</style>

2.接下来我们要根据屏幕对视频进行自适应处理

javascript 复制代码

  mounted() {
    // 屏幕自适应
    // 获取屏幕宽高，根据不同屏幕调整视频的宽高自适应大小
    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'
        }
      }
    }
  }

3. 此时有人会想Vue是不需要操作Dom元素的，那原生怎么适配，那么就来一个原生写法

书写基本样式，与Vue的基本一样,加入了object-fit: cover标签使音频自适应video宽高

javascript 复制代码

<style >
  *{
    margin: 0;
    padding: 0; 
    width: 100%;
    height: 100%;
    /* 清除浏览器边距用 */
  }
  .homepage-hero-module,
  .video-container {
    position: relative;
    heviight: 100vh;
    overflow: hidden;
  }
  
  .video-container {
    z-index: 0;
    position: absolute;
  }
  .fixStyle{
    object-fit: cover
  }
  .fillWidth {
    width: 100%;
  }
  </style>
  
<body>
  <div class="video-container">
    <video class="fixStyle" autoplay loop muted class="fillWidth" :canplay="canplay" >
      <source src="./test.mp4" type="video/mp4" />
      <!-- 浏览器不支持 video 标签，建议升级浏览器。 -->
      <source src="./test.mp4" type="video/webm"/>
      <!-- 浏览器不支持 video 标签，建议升级浏览器。 -->
    </video>
  </div>
</div>
</body>

重点关注下逻辑，因为原生的需要操纵Dom元素
只需使用 document.querySelector('')即可，注：class使用document.querySelector('.样式名') id使用document.querySelector('#id名')
由于想进入界面就看到效果，可以用立即执行函数(function () {})());

javascript 复制代码

    // 屏幕自适应
    // 获取屏幕宽高，根据不同屏幕调整视频的宽高自适应大小
<script>
      (window.onresize = () => {
      const windowWidth = document.body.clientWidth
      const windowHeight = document.body.clientHeight

      const windowAspectRatio = windowHeight / windowWidth
      // 获取Dom节点
      const fixStyle = document.querySelector('.fixStyle')
      let videoWidth
      let videoHeight
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth
        videoHeight = videoWidth * 0.5625
        fixStyle.style.height = windowHeight + 'px',
        fixStyle.style.width =windowWidth + 'px',
        fixStyle.style.marginLeft = 'initial'
        fixStyle.style.marginBottom = (windowHeight - videoHeight) / 2 + 'px'
      } else {
        videoHeight = windowHeight
        videoWidth = videoHeight / 0.5625
        fixStyle.style.height = windowHeight + 'px',
        fixStyle.style.width = windowHeight / 0.5625 + 'px',
        fixStyle.style.left = (windowWidth - videoWidth) / 2 + 'px',
        fixStyle.style.bottom = 'initial'
      }
    })()
</script>