- 最近忽然想把视频当作项目登录背景，我直接使用了
video标签岂不是手到擒来，然后我发现我的界面好像不太对，视频并没有铺满整个屏幕。
- 使用原生最大的优势就是这个写法能兼容所有的框架与项目，就算不是用Vue写的项目也能根据实际需求写入，因为所有的写法都是原生的
- 特别注意：由于视频不能写为背景，需用
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.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宽高
<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.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>
网友评论