<div class="videoContainer">
<video :style="fixStyle" class="fillWidth" playsinline autoplay muted loop>
<source src="static/video/loginVideo.mp4" type="video/mp4" />
</video>
</div>
data
fixStyle: '', //屏幕发生变化时给播放器设置的样式
js
//监听屏幕大小实时给播放器设置宽高
getVideoStyle() {
window.onresize = () => {
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
console.log(
windowWidth,
windowHeight,
windowAspectRatio,
'屏幕实时大小'
)
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',
}
}
}
window.onresize()
},
css
.videoContainer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}