demand:
When giving a video, the first screen needs to cover the entire screen and adapt to different resolutions.
Solutions:
Get the current viewport width and height, adjust the video aspect ratio to fill, adjust the video window position to center horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video_demo</title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.pageIndex {
width: 100%;
height: 100%;
position: relative;
background-color: #0f0f12;
}
.videobox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pageIndex .fullvid {
position: absolute;
width: 100%;
left: 50%;
margin-left: -50%;
top: 0px;
overflow: hidden;
background-color: #0f0f12;
}
</style>
<body>
<div class="page pageIndex">
<div class="fullvid">
<div class="videobox">
<video muted="muted" loop="loop" autoplay="autoplay" height="100%" width="100%">
<source src="https://static.web.sdo.com/jijiamobile/pic/ff14/ffweb850/vindex0130_2.mp4?123" type="video/mp4">
</video>
</div>
</div>
</div>
</body>
<script>
var n = document.documentElement.clientHeight,
e = document.documentElement.clientWidth,
t = n / e;
$(".page,.fullvid").height(n);
// 9/16=0.5625视频宽高比
if (t > .5625) {
$(".videobox").width(n / .5625);
$(".videobox").height(n);
$(".videobox").css("marginLeft", 0 - (n / .5625 - e) / 2);
$(".videobox").css("marginTop", 0);
}
else if (t < .5625) {
$(".videobox").width(e);
$(".videobox").height(.5625 * e);
$(".videobox").css("marginLeft", 0);
$(".videobox").css("marginTop", 0 - (.5625 * e - n) / 2);
}
else {
$(".videobox").width(e);
$(".videobox").height(n);
$(".videobox").css("marginLeft", 0);
$(".videobox").css("marginTop", 0);
}
</script>
</html>