Html 缩放 HTML5 视频并打破纵横比以填充整个网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4000818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scale HTML5 Video and break aspect ratio to fill whole site
提问by Roland
I want to use a 4:3 video as a background on a site, but setting the width and height to 100% doesnt work, since the aspect ratio is kept intact, so the video doesnt fill the whole width of the site.
我想在网站上使用 4:3 视频作为背景，但将宽度和高度设置为 100% 不起作用，因为纵横比保持不变，因此视频不会填满网站的整个宽度。
thanks for your help!
感谢您的帮助！
here is my html and css code
这是我的 html 和 css 代码
html:
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:
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;
}
回答by Mathias
this a really old thread, I know, and what I'm proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact
这是一个非常古老的线程，我知道，我提出的不一定是您正在寻找的解决方案，但对于所有因搜索我搜索的内容而降落在这里的人：缩放视频以填充视频容器元素，保持比例完好
If you want the video to fill the size of the <video>element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-sizefor background images you can use the following:
如果您希望视频填充<video>元素的大小，但视频已正确缩放以填充容器，同时保持纵横比完整，您可以使用 CSS 来实现object-fit。与background-size背景图像非常相似，您可以使用以下内容：
video {
width: 230px;
height: 300px;
object-fit: cover;
}
I hope this can be of help for some people.
我希望这可以对某些人有所帮助。
回答by Ouadie
you can use:
您可以使用：
min-width: 100%;
min-height: 100%;
http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
回答by drudge
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
[...] in the same way as the img element — if you only set one of width and height, the other dimension is automatically adjusted appropriately so that the video retains its aspect ratio. However — unlike the img element — if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box.Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
[...] 以与 img 元素相同的方式 - 如果您只设置宽度和高度之一，则会自动适当调整另一个尺寸，以便视频保持其纵横比。但是——与 img 元素不同——如果您将宽度和高度设置为与视频的纵横比不匹配的内容，则视频不会被拉伸以填充框。相反，视频保留了正确的纵横比，并在视频元素内以信箱形式显示。视频将在视频元素内尽可能大地呈现，同时保持纵横比。
回答by Jim Jeffers
I work around this in javascript by comparing the ratio set on the element to the source video and then applying a CSS transform: https://gist.github.com/1219207
我通过比较元素上设置的比率与源视频然后应用 CSS 转换来解决这个问题：https: //gist.github.com/1219207
回答by Shane
Picked this up yesterday and have been wrestling for an answer. This is somewhat similar to Jim Jeffers suggestion, but it works for x and y scaling, is in javascript syntax and only relies on jQuery. It seems to work pretty well:
昨天拿起这个，一直在努力寻找答案。这有点类似于 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 + ')')
}
}
You'll run into some issues if you are using the native controls as you can see in this fiddle: http://jsfiddle.net/MxxAv/
如果您使用本机控件，您会遇到一些问题，如您在此小提琴中所见：http: //jsfiddle.net/MxxAv/
I have some unusual requirements because of all the abstraction layers in my current project. Because of that I'm using a wrapper div in the example and scaling the video to 100% inside the wrapper to prevent problems in some of the corner cases I have encountered.
由于我当前项目中的所有抽象层，我有一些不寻常的需求。因此，我在示例中使用了包装器 div 并将视频缩放到包装器内的 100%，以防止在我遇到的一些极端情况下出现问题。
回答by Hyman
What worked for me is
对我有用的是
video {
object-fit: fill;
}
回答by Mulhoon
I use this to fill either width OR height... (requires jQuery) This KEEPS the aspect ratio and fills the div. I know the question was to break the aspect ration, but it isn't necessary.
我用它来填充宽度或高度...（需要 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 + ')');
};
as long as the <video>has width and height set to 100%and your container div has css overflow:hiddenjust pass it the video tag.
只要将<video>宽度和高度设置为100%并且您的容器 div 具有 css，overflow:hidden只需将视频标签传递给它。
var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);
回答by user2121874
The correct CSS option for this is object-fit: contain;
正确的 CSS 选项是 object-fit: contain;
The following example will stretch a background image across the width of the screen (while BREAKING the aspect ratio), and maintaining a constant fixed height.
以下示例将在屏幕宽度上拉伸背景图像（同时打破纵横比），并保持恒定的固定高度。
body {
background-image:url(/path/to/background.png)
background-repeat: no-repeat;
background-position: top center;
background-size: 100% 346px;
object-fit: contain;
}
For a video in the OP's context it would then be:
对于 OP 上下文中的视频，它将是：
video#vidtest {
width: 100%;
height: 100%;
object-fit: contain;
}
回答by jox
After some struggling, this is what I ended up with. It will automatically scale the video in the right moment.
经过一番挣扎，这就是我最终得到的。它会在适当的时候自动缩放视频。
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", "");
}
});
Just put that code in a $(document).ready()block.
只需将该代码放在一个$(document).ready()块中。
Tested on Chrome 53 , Firefox 49, Safari 9, IE 11 (IE does scale the video correctly, but might do other funny stuff around it though).
在 Chrome 53、Firefox 49、Safari 9、IE 11 上测试（IE 确实可以正确缩放视频，但可能会在它周围做其他有趣的事情）。
