Rol*_*and 20 css html5 html5-video
我想在网站上使用4:3视频作为背景,但将宽度和高度设置为100%不起作用,因为纵横比保持不变,因此视频不会填满网站的整个宽度.
谢谢你的帮助!
这是我的html和css代码
HTML:
<!DOCTYPE HTML>
<html land="en">
<head>
<link rel="stylesheet" type="text/css" href="html5video.css" />
<title>html 5 video test</title>
</head>
<body id="index">
<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>
<div class="cv">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
CSS:
body
{
background-color:#000000;
}
#vidtest {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200%;
height: 100%;
z-index: -1000;
}
.cv
{
width: 800px;
position:relative;
text-align:center;
margin-top: 100px;
color:#FFFFFF;
font-family:"Arial";
font-size: 10px;
line-height: 2em;
text-shadow: 3px 3px 2px #383838;
margin-left: auto;
margin-right: auto;
}
Mat*_*ias 56
这是一个非常古老的主题,我知道,我提议的并不一定是你正在寻找的解决方案,但对于所有因为搜索我搜索的内容而来到这里的人:缩放视频以填充视频容器元素,保持比例完好
如果您希望视频填充<video>元素的大小,但视频已正确缩放以填充容器,同时保持宽高比,您可以使用CSS执行此操作object-fit.与background-size背景图像非常相似,您可以使用以下内容:
video {
width: 230px;
height: 300px;
object-fit: cover;
}
我希望这对某些人有帮助.
Oua*_*die 14
您可以使用:
min-width: 100%;
min-height: 100%;
http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
dru*_*dge 10
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
[...]与img元素的方式相同 - 如果您只设置宽度和高度之一,则会自动调整另一个尺寸,以便视频保留其宽高比.但是 - 与img元素不同 - 如果将宽度和高度设置为与视频宽高比不匹配的内容,则视频不会拉伸以填充框.相反,视频保留正确的宽高比,并在视频元素内使用letterbox.视频将在视频元素内尽可能大地呈现,同时保持纵横比.
小智 8
对我有用的是
video {
object-fit: fill;
}
昨天选了这个,并一直在争取答案.这有点类似于Jim Jeffers的建议,但它适用于x和y缩放,是javascript语法,只依赖于jQuery.它似乎工作得很好:
function scaleToFill(videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height();
if (videoRatio < tagRatio) {
$video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio + ')')
} else if (tagRatio < videoRatio) {
$video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio + ')')
}
}
如果你正在使用本机控件,你会遇到一些问题,你可以在这个小提琴中看到:http: //jsfiddle.net/MxxAv/
由于我当前项目中的所有抽象层,我有一些不寻常的要求.因为我在示例中使用了包装器div,并且在包装器内将视频缩放到100%以防止在我遇到的一些极端情况中出现问题.
如果该object-fit属性不适合您（WebView、Android 等），您可以自己计算视频的高度。
例如，对于视频，16:9高度为calc(100vw * 9 / 16)
.video-wrapper {
width: 100%;
height: calc(100vw * 9 / 16);
position: relative;
}
video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}