37

我想在网站上使用 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;
}
4

9 回答 9

103

这是一个非常古老的线程，我知道，我提出的不一定是您正在寻找的解决方案，而是对于所有因搜索我搜索的内容而登陆这里的人：缩放视频以填充视频容器元素，保持比例完好

如果您希望视频填充<video>元素的大小，但视频可以正确缩放以填充容器，同时保持纵横比不变，您可以使用 CSS 使用object-fit. 就像background-size背景图像一样，您可以使用以下内容：

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

我希望这可以对某些人有所帮助。

编辑：适用于大多数浏览器，但 IE

于 2015-03-05T00:02:59.093 回答
14


您可以使用：

min-width: 100%;
min-height: 100%;

http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

于 2014-01-09T15:32:57.610 回答
10

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[...] 与 img 元素一样——如果您只设置宽度和高度中的一个，另一个维度会自动适当调整，以便视频保持其纵横比。但是 - 与 img 元素不同 -如果您将宽度和高度设置为与视频的纵横比不匹配的内容，则视频不会被拉伸以填充框。取而代之的是，视频保留了正确的纵横比，并在视频元素内加了信箱。视频将在视频元素内尽可能大地渲染，同时保持纵横比。

于 2010-10-22T21:01:56.613 回答
8

昨天捡到这个，一直在努力寻找答案。这有点类似于 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%，以防止在我遇到的某些极端情况下出现问题。

于 2012-10-31T21:09:56.933 回答
8

对我有用的是 

video {
object-fit: fill;
}
于 2016-12-03T17:53:10.580 回答
3

如果该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;
}
于 2021-01-09T08:33:39.390 回答
1

我用它来填充宽度或高度...（需要 jQuery） 这保持纵横比并填充 div。我知道问题是要打破长宽比，但这不是必需的。

var fillVideo = function(vid){
    var video = $(vid);
    var actualRatio = vid.videoWidth/vid.videoHeight;
    var targetRatio = video.width()/video.height();
    var adjustmentRatio = targetRatio/actualRatio;
    var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio;
    video.css('-webkit-transform','scale(' + scale  + ')');
};

只要将<video>宽度和高度设置为100%并且您的容器 div 具有 css overflow:hidden，只需将视频标签传递给它。

var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);
于 2015-03-26T09:51:10.147 回答
0

正确的 CSS 选项是object-fit: contain;

以下示例将在屏幕宽度上拉伸背景图像（同时打破纵横比），并保持恒定的固定高度。

body {
    background-image:url(/path/to/background.png)
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 346px;
    object-fit: contain;
}

对于 OP 上下文中的视频，它将是：

video#vidtest {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
于 2015-07-15T17:37:21.420 回答
0

经过一番挣扎，这就是我最终的结果。它会在适当的时候自动缩放视频。

var videoTag = $('video').get(0);
videoTag.addEventListener("loadedmetadata", function(event) {
   videoRatio = videoTag.videoWidth / videoTag.videoHeight;
   targetRatio = $(videoTag).width() / $(videoTag).height();
    if (videoRatio < targetRatio) {
      $(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")");
    } else if (targetRatio < videoRatio) {
      $(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")");
    } else {
      $(videoTag).css("transform", "");
    }
});

只需将该代码放在一个$(document).ready()块中即可。

在 Chrome 53、Firefox 49、Safari 9、IE 11 上进行了测试（IE 确实可以正确缩放视频，但可能会围绕它做其他有趣的事情）。

于 2016-10-14T22:40:42.580 回答