解决video内视频没有铺满（存在留白）的方式
方式1 object-fit: contain
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="referrer" content="no-referrer">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Control</title>
<style>
.hidden {
display: none;
}
.box {
border-radius: 10px;
border: 1px solid red;
overflow: hidden;
width: 100%;
height: 360px; /* 设置一个固定的高度 */
position: relative;
}
video {
width: 100%;
height: 100%;
object-fit: contain; /* 使用 contain 以确保视频完整显示 */
}
</style>
</head>
<body>
<h1>视频3</h1>
<div class="box">
<video controls preload="auto">
<source src="http://eamaterial-30012.picsz.qpic.cn/material/video/2355049255_1195666d66fb4be35959c9495a9326c3" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
解释
.box样式:- 设置
width: 100%，确保容器宽度占满父容器。 - 使用
position: relative确保视频在其内部正确定位。 - 使用
display: flex、justify-content: center和align-items: center来确保视频在容器中居中显示。
- 设置
video样式:- 设置
width: 100%和height: 100%，确保视频填充整个容器。 - 使用
object-fit: cover保持视频的宽高比，并裁剪视频以填充整个容器。
- 设置
使用 object-fit: contain
如果你希望视频完整显示而不裁剪，可以使用 object-fit: contain：
方式2 动态设置高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="referrer" content="no-referrer">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Control</title>
<style>
.hidden {
display: none;
}
.box {
border-radius: 10px;
border: 1px solid red;
overflow: hidden;
width: 100%;
position: relative;
}
video {
width: 100%;
object-fit: cover; /* 使用 cover 以确保视频完全填充容器 */
}
</style>
</head>
<body>
<h1>视频3</h1>
<div class="box">
<video id="myVideo" controls preload="auto">
<source src="http://eamaterial-30012.picsz.qpic.cn/material/video/2355049255_1195666d66fb4be35959c9495a9326c3" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
const videoRatio = video.videoWidth / video.videoHeight;
const container = video.parentElement;
container.style.height = `${container.clientWidth / videoRatio}px`;
});
});
</script>
</body>
</html>
解释
.box样式:- 设置
width: 100%，确保容器宽度占满父容器。 - 使用
position: relative确保视频在其内部正确定位。
- 设置
video样式:- 设置
width: 100%，确保视频宽度占满容器。 - 使用
object-fit: cover保持视频的宽高比，并裁剪视频以填充整个容器。
- 设置
- JavaScript:
- 使用
DOMContentLoaded事件确保 DOM 完全加载后再执行脚本。 - 监听
loadedmetadata事件，确保视频元数据加载完成后获取视频的宽高比。 - 根据视频的宽高比动态设置容器的高度，确保视频正确填充容器。
- 使用
场景：video在聚焦的时存在黑色边框
针对此场景，有另一种方法，通过设置video背景色为黑色，从而隐藏其边框。
