当前位置：首页 > news >正文

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

news 2025/10/9 7:59:57

文章目录

1. 首先我们先把布局写入：
2.接下来我们要根据屏幕对视频进行自适应处理
3. 此时有人会想Vue是不需要操作Dom元素的，那原生怎么适配，那么就来一个原生写法

特别注意：由于视频不能写为背景，需用z-index来区分元素层级

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

<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.接下来我们要根据屏幕对视频进行自适应处理

  mounted() {// 屏幕自适应// 获取屏幕宽高，根据不同屏幕调整视频的宽高自适应大小window.onresize = () => {const windowWidth = document.body.clientWidthconst windowHeight = document.body.clientHeightconst windowAspectRatio = windowHeight / windowWidthlet videoWidthlet videoHeightif (windowAspectRatio < 0.5625) {videoWidth = windowWidthvideoHeight = videoWidth * 0.5625this.fixStyle = {height: windowWidth * 0.5625 + 'px',width: windowWidth + 'px','margin-bottom': (windowHeight - videoHeight) / 2 + 'px','margin-left': 'initial'}} else {videoHeight = windowHeightvideoWidth = videoHeight / 0.5625this.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宽高

<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 () {})());

    // 屏幕自适应// 获取屏幕宽高，根据不同屏幕调整视频的宽高自适应大小
<script>(window.onresize = () => {const windowWidth = document.body.clientWidthconst windowHeight = document.body.clientHeightconst windowAspectRatio = windowHeight / windowWidth// 获取Dom节点const fixStyle = document.querySelector('.fixStyle')let videoWidthlet videoHeightif (windowAspectRatio < 0.5625) {videoWidth = windowWidthvideoHeight = videoWidth * 0.5625fixStyle.style.height = windowHeight + 'px',fixStyle.style.width =windowWidth + 'px',fixStyle.style.marginLeft = 'initial'fixStyle.style.marginBottom = (windowHeight - videoHeight) / 2 + 'px'} else {videoHeight = windowHeightvideoWidth = videoHeight / 0.5625fixStyle.style.height = windowHeight + 'px',fixStyle.style.width = windowHeight / 0.5625 + 'px',fixStyle.style.left = (windowWidth - videoWidth) / 2 + 'px',fixStyle.style.bottom = 'initial'}})()
</script>