缩放 HTML5 视频并打破纵横比以填充整个站点
Posted
技术标签:
【中文标题】缩放 HTML5 视频并打破纵横比以填充整个站点【英文标题】：scale HTML5 Video and break aspect ratio to fill whole site 【发布时间】：2011-04-29 09:16:20 【问题描述】：我想在网站上使用 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" >
</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;
【问题讨论】：
【参考方案1】：我知道，这是一个非常古老的主题，我提出的不一定是您正在寻找的解决方案，而是针对所有因搜索我搜索的内容而来到这里的人：缩放视频以填充视频容器元素，保持比例不变
如果您希望视频填充 <video> 元素的大小，但视频可以正确缩放以填充容器，同时保持纵横比不变，您可以使用 CSS 使用 object-fit 做到这一点。就像 background-size 的背景图片一样，您可以使用以下内容：
video
width: 230px;
height: 300px;
object-fit: cover;
我希望这对某些人有所帮助。
编辑：works in most browsers but IE
【讨论】：
对象拟合：封面；天哪，我爱你 令人遗憾的是，尽管 Google、Mozilla 和 Otello 联合人道主义努力，但仍有许多人患有 IE。 太好了，就像一个魅力。请注意，object-fit:fill 会导致图像在缩放时扭曲比例，这似乎是 OP 所要求的。 同意@Nathan，object-fit: fill; 是我和 OP 一直在寻找的，但非常感谢您展示了正确的方向！ ;)
谢谢！这真的很有帮助！在我的具体情况下，我需要设置 object-fit: fill;，因为 Chrome 在用户代理样式表中似乎默认为 object-fit: contain;。【参考方案2】：
您可以使用：
min-width: 100%;
min-height: 100%;
http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
【讨论】：
这肯定是 max-width: 100%;最大高度：100%； width 和 height 属性分别设置为 100vw 和 100vh 以及 object-fit 和可能的 margin auto ?【参考方案3】：http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
[...] 与 img 元素一样——如果您只设置宽度和高度中的一个，另一个维度会自动适当调整，以使视频保持其纵横比。但是 - 与 img 元素不同 - 如果您将宽度和高度设置为与视频的纵横比不匹配的值，则视频不会被拉伸以填充框。相反，视频会保留正确的纵横比，并且在视频元素内加了信箱。 视频将在视频元素内尽可能大地呈现，同时保持纵横比。
【讨论】：
谢谢，但是哪里是最好的抱怨呢？在我看来，这只是一个不必要的限制。 您可以随时使用视频未播放的空间来添加小部件和东西。 :) @Roland HTML5 规范仍处于起草阶段，所以如果你想投诉我相信你可以想办法这样做:) 真毅！我不太确定该给谁写这篇文章；）W3c 网站在这方面并不完全是用户友好的【参考方案4】：昨天捡到这个，一直在努力寻找答案。这有点类似于 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%，以防止我遇到的一些极端情况出现问题。
【讨论】：
【参考方案5】：对我有用的是
video
object-fit: fill;
【讨论】：
谢谢。这实际上打破了 OP 要求的纵横比。【参考方案6】：如果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;
【讨论】：
【参考方案7】：我用它来填充宽度或高度...（需要 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);
【讨论】：
【参考方案8】：正确的 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;
【讨论】：
这不适用于使用 Android 4.4.4 WebView（Cordova 应用）的视频。【参考方案9】：经过一番挣扎，这就是我最终的结果。它会在适当的时候自动缩放视频。
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 确实可以正确缩放视频，但可能会做其他有趣的事情）。
【讨论】：
以上是关于缩放 HTML5 视频并打破纵横比以填充整个站点的主要内容，如果未能解决你的问题，请参考以下文章