html - 如何在没有视频流出的情况下在div中心制作<video></video>标签？-6ren

html - 如何在没有视频流出的情况下在div中心制作标签？

转载作者：行者123 更新时间：2023-11-28 17:23:35

29

4

它使我的视频居中并将控件放置在 div 底部但视频流出。在 css 样式表中，css 似乎无法识别。样式表中的 cos 颜色为黑色。我使用 Chrome 。

div.video_div{
	width:800px;
	height:300px;
	border:1px solid red;
	background-color:blue;
	margin:0 auto;
}
video{
	width:100%;
	height:100%;
	object-fit:cover;
}

<!DOCTYPE html>
<html>
<head>
<title>video</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="video_div">
<video controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>

最佳答案

尝试添加规则 overflow: hidden;到您的 div.video_div 规则:

div.video_div{
    width:800px;
    height:300px;
    border:1px solid red;
    background-color:blue;
    margin:0 auto;
    overflow: hidden; /* Add this */
}
video{
    width:100%;
    height:100%;
    /* Use contain instead if you want the object to fit without cropping */
    object-fit: cover; 
}

object-fit: cover 属性将缩放视频，保留宽高比。这可能会使它的一部分溢出边界。溢出:周围 div 上隐藏的 CSS 隐藏了这个溢出。您可能还想使用 object-fit: contain 代替，这将保留宽高比，但使视频完全适合框内。 (您可以查看 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit 以查看各种值。)

带有工作视频源的 jsfiddle 示例: https://jsfiddle.net/gmg43wb2/

关于html - 如何在没有视频流出的情况下在div中心制作<video></video>标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41293452/

29

4

0

文章推荐： python - uWSGI 在 Windows 上安装失败

文章推荐： css - nvd3 指令图——如何调整填充？

文章推荐： javascript - 在 Reactjs 中的 Firebase 中插入数据

MySQL 根据发票获取每日流入/流出？
首先是我的 table : mysql> desc invoice; +-------------+-----------------------+------+-----+---------+---
CSS 背景附件已修复 - 流出？
我有一些这样的 HTML: 和 CSS div#container { width:960px; margin:0 auto; } div#main {
python - 如何获取列表中每个项目的流入/流出？
我有这个列表: myList = [a, a, a, b, b, a, c, c, b, a] 我想计算每个唯一项目的流入和流出。 “a”的流入 = 出现次数 = 5(当转换进入“a”时) 'a' 的
html - 缩放到移动设备时文本从 div 流出
我制作的布局需要在移动屏幕上可见。目前，当我缩小到移动设备或在我的 iPhone 5 上查看网站时，其中带有较长文本的 div 到处都是。由于我将所有内容都包装在称为 section0、sectio
html -

首页

博学

6Ren·AI

商城

html - 如何在没有视频流出的情况下在div中心制作标签？