vue3 登录页视频背景 开发

方法比较笨，可以参考，思路如下：
       我把这个页面看成三层。最里面是视频，中间挂个蒙板，然后最上层放内容，这样简单粗暴的达到效果

 然后来说说中间这个蒙板吧，主要是两个想法 ，    
       一个就是客户，领导们的想法比较多，如果仅仅只是说有个视频虚化啥的，有可能并不能完全解决他们的想法，而且单纯的视频虚化，作用在有些视频上效果不大行
       二就是如果真的觉得蒙板需要啥，或者缺点啥的时候，其实很多时候一张半透明的图片就能解决问题，他主要在意的是视觉的体验，可以找UI弄过半透明的图，然后替换一下就行，主打的就是简单省事
以上仅为个人观点

1. js代码内容

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'

const wrapperStyle = {}
const videoRef = ref<HTMLVideoElement | null>(null)

const handleCanPlay = () => {
  if (videoRef.value) {
    videoRef.value.play().catch((error) => {
      console.error('视频播放失败:', error)
    })
  }
}

onMounted(() => {
  nextTick(() => {
    if (videoRef.value) {
      videoRef.value.style.filter = 'blur(2px)' // 设置视频虚化
      // 确保视频自动播放
      videoRef.value.play()
      // 确保视频完全平铺在页面上
      videoRef.value.style.objectFit = 'cover'
    }
  })
})
</script>

　视图层代码

<template>
  <div>
      <div>
      <video ref="videoElement" class="video-background" autoplay loop muted @canplay="handleCanPlay">
        <source src="../assets/video/33.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
     <!-- 这个是我说的蒙板->
    <div></div>
      <!-- 这个就是你要写的内容->
    <div></div>
    </div>
</template>

　　css 额，css代码没啥可说的，反正就是定位，z-index 设置数值