video随浏览器窗口变化而缩放（保证宽高比，且video左下角有文字不错位）
今天多人视频布局时有涉及到这个需求，要实现下面的效果，浏览器窗口变化时要求整体锁定比例一起缩放：
纯CSS我没有实现，但还是总结一下，包括下面四种情况：
1. video原始宽高，默认锁定宽高比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 80%;
background-color: red;
margin:0 auto;
}
.video {
vertical-align: top;
}
.text {
padding-left:20px;
color:#fff;
}
.position-father {
position: relative;
}
.position-son {
position: absolute;
}
.con1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.fitWidth {
height: 100%;
}
/* 上述布局，“con”已经有了flex属性，我想要“视频”始终在video左下角 */
/* 1. 使用js（宽度等于video） + bottom：0*/
.position-son {
bottom:0;
}
</style>
</head>
<body>
<!-- 1. video原始宽高，默认锁定宽高比 -->
<!-- <div class="con con1 position-father" id="con1">
<video src="./chrome.webm" class="video fitWidth" id="video1"></video>
<div class="text text1 position-son" id="text1">视频</div>
</div> -->
<script>
window.onresize=function modify(){
var s=window.innerHeight;
document.getElementById("con1").style.height=s-100+'px';
/*
1. 使用js(获取元素宽高):
1). window.getComputedStyle(ele).width/height：带单位，仅content
2). ele.getBoundingClientRect().width/height：不仅能获取宽高，还能获取位置，不带单位
3). ele.style.width/height：只能获取有内联style样式的，不带单位
4). ele.clientHeight：不带单位，content+padding * 2
5). ele.offsetHeight：不带单位，内容高度 + 内边距*2 +边框*2
*/
let video1= document.getElementById("video1")
var contentWidth1 = window.getComputedStyle(video1).width;
console.log(contentWidth1);
document.getElementById("text1").style.width=contentWidth1;
}
window.onload=function modify(){
var s=window.innerHeight;
document.getElementById("con1").style.height=s-100+'px';
let video1 = document.getElementById("video1")
// 跟页面呈现的不一样，但是当窗口变化是一样？？？
var contentWidth1 = window.getComputedStyle(video1).width; // 886px
// var contentWidth = video1.clientWidth; // 886
// var contentWidth = video1.getBoundingClientRect().width; // 886
console.log(contentWidth1);
// document.getElementById("text1").style.width=contentWidth1;
document.getElementById("text1").style.width=858.66+'px'; // 因为上述得到的video宽度错误，初始手动设置，
}
</script>
</body>
</html>
2. video设置fill填充，宽高随div
video完全随div缩放，因此要锁定宽高比就只能锁定div的宽高比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 80%;
background-color: red;
margin:0 auto;
}
.video {
vertical-align: top;
}
.text {
padding-left:20px;
color:#fff;
}
.position-father {
position: relative;
}
.position-son {
position: absolute;
}
.con1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.fitWidth {
height: 100%;
}
/* 上述布局，“con”已经有了flex属性，我想要“视频”始终在video左下角 */
/* 1. 使用js（宽度等于video） + bottom：0*/
.position-son {
bottom:0;
}
/* 2. */
.con2 {
width: 40%;
}
.fitAll {
width: 100%;
height: 100%;
}
.fill {
object-fit: fill;
}
/*
先看下简单的div锁定宽高比（纯css,不包括js）
1). 若div中只有img元素，只要将两者height全部设置为auto即可
2). 利用padding-bottom，这种方式只能随宽度变化
3). 利用伪元素
*/
.lock {
background-color: red;
width: 100%;
/* position: relative; */
padding-bottom: 5%;
box-sizing: border-box;
}
.wrapper {
background: #ccc;
width: 10%;
}
.wrapper::before {
content: '';
padding-top: 200%;
float: left;
}
.wrapper::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 2. video设置fill填充，宽高随div，这种情况只能想办法锁定div的宽高比,但是实际只能实现高度随宽度的变化而缩放，仅高度变化时无缩放 -->
<!-- 先看下简单的div锁定宽高比 -->
<div class="lock">
<video src="./chrome.webm"></video>
</div>
<div class="wrapper"></div>
<div class="con position-father con2" id="con1">
<video src="./chrome.webm" class="video fitAll video2 fill" id="video2"></video>
<div class="text position-son text2" id="text2">视频</div>
</div>
</body>
</html>
3. video默认锁定宽高比，宽高随div
情况3相比情况4，可以获得video的画面高宽，因此使用js（绝对定位+margin-left、margin-bottom计算定位）可以实现，但是纯css我也没找到方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 80%;
background-color: red;
margin:0 auto;
}
.video {
vertical-align: top;
}
.text {
padding-left:20px;
color:#fff;
}
.position-father {
position: relative;
}
.position-son {
position: absolute;
bottom:0;
}
.con1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.fitWidth {
height: 100%;
}
/* 上述布局，“con”已经有了flex属性，我想要“视频”始终在video左下角 */
/* 1. 使用js（宽度等于video） + bottom：0*/
/* 2. */
.con2 {
width: 40%;
}
.fitAll {
width: 100%;
height: 100%;
}
.fill {
object-fit: fill;
}
/* 3. video自身有contain属性锁定宽高比，video随div,只能利用js实现 */
</style>
</head>
<body>
<!-- 3. video自身有contain属性锁定宽高比，video随div -->
<div class="con position-father con2" id="con1">
<div class="s">
<video src="./chrome.webm" class="video fitAll video2" id="video2"></video>
<div class="text position-son text2" id="text2">视频</div>
</div>
</div>
<script>
</body>
</html>
4. video默认锁定宽高比，div不设置宽高随video
这种情况我没有找到解决的方案，因为video默认object-fit:contain属性，浏览器窗口变化时有缩放，但是video实际宽高还是原来的宽高，即显示画面宽高与元素宽高不一致，利用js也无法获取video在页面显示的画面的宽高，所以尽量不要这样布局，而且多人会议的情况下多个video并不友好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 80%;
background-color: red;
margin:0 auto;
}
.video {
vertical-align: top;
}
.text {
padding-left:20px;
color:#fff;
}
.position-father {
position: relative;
}
.position-son {
position: absolute;
bottom:0;
}
/* 4. video自身用contain属性锁定宽高比，div随video(这种方式不合适，缩放后宽高会错位) */
.con4 {
background-color: red;
}
.video4 {
width: 40%;
/* 防止video高度变大，但因为比例锁定，height变大后文字在垂直方向错位 */
max-height: 425px;
}
.text {
width: 40%;
}
</style>
</head>
<body>
<!-- 4. video自身用contain属性锁定宽高比，div随video -->
<!-- <div class="position-father con4" id="con4">
<video src="./chrome.webm" class="video video4" id="video4"></video>
<div class="text position-son text4" id="text4">视频</div>
</div> -->
</body>
</html>
扫一扫
1701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
