Question

你可以将视频“拉伸”到宽度和宽度。视频元素的高度？显然，默认情况下，视频会缩放＆amp;按比例安装在视频元素内。

感谢

Answer 1

我已经使用object-fit进行测试：填写CSS

效果很好。

video {
  object-fit: fill;
}

来自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit）：

object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中。

值：填写

替换内容的大小可以填充元素的内容框：对象的具体对象大小是元素的使用宽度和高度。

Answer 2

来自the spec for <video>：

视频内容应该在元素的播放区域内呈现，以便视频内容以尽可能大的视频内容显示在播放区域的中心，并保留视频内容的宽高比。因此，如果回放区域的宽高比与视频的宽高比不匹配，则视频将显示为letterboxed或pillarboxed。元素回放区域中不包含视频的区域不代表任何内容。

没有规定拉伸视频而不是信箱。这可能是因为拉伸会给用户带来非常糟糕的体验，并且大部分时间都不是预期的。默认情况下，图像会被拉伸以适应，因此，您会看到很多图像在线严重扭曲，很可能是由于指定高度和宽度时出现的一个简单错误。

您可以使用CSS 3 transforms实现拉伸效果，虽然这些尚未完全标准化或在所有浏览器中实现，并且实现它的那些，您需要使用供应商前缀，例如{{ 1}}或-webkit-。这是一个例子：

-moz-

Answer 3

这对我来说很完美

http://coding.vdhdesign.co.nz/?p=29

$VideoElement = $(_VideoElement); //Cache Jquery reference of this
var iOriginalVideoHeight =  _VideoElement.videoHeight;
var iCurrentVideoHeight = $VideoElement.height();
var iVideoContainerHeight = $VideoElement.parent().height();
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;


//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
 $VideoElement.css({
    "transform-origin": "0% 0%",
    "transform":"scaleY(" + iScaleY +")",
    "-ms-transform-origin" : "0% 0% ", /* IE 9 */
    "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
    "-moz-transform-origin" : "0% 0%", /* Firefox */
    "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
    "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
    "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
    "-o-transform-origin":"0% 0%", /* Opera */
    "-o-transform":"scaleY(" + iScaleY +")" /* Opera */
 });

Answer 4

还有the object-fit CSS property，它可能会为您提供所需的信息。

顺便说一下，我认为这个请求是针对How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?。

Answer 5

如果您的浏览器不支持object-fit:cover样式，则不会更改视频的比例，但会删除视频查看器顶部或底部或侧面的丑陋“未填充”空间。

假设您有一个500x281的页内查看器（从1280x720开始适当调整大小）。但有时你可能会得到一个与16：9完全不成比例的视频，例如1278x720或320x176，就像W3C网站上的“Buck Bunny”视频一样。如果视频完全填满容器并且你不必为每个不正确比例的视频创建一个新的容器，那就太好了。

给出代码片段如：

<style>
#vidcontent {
  width:500;
  height:281;
  border:2px solid #F00;
  object-fit:cover; /* for those who do support it */
}
</style>

<video id="vidcontent" width="500" height="281" autoplay controls loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

将根据浏览器处理object-fit的方式呈现顶部和底部带有黑线或白线的视频。为视频容器的动画高度大小调整添加以下JavaScript，通过强制视频容器与视频匹配，使这些行消失，至少是垂直的。

<script type="text/javascript">
  vidContent = document.getElementById('vidcontent');
  vidContent.addEventListener("loadedmetadata", function(e) {
    var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight;
    vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px";
  }, false);
</script>

我们将容器的当前宽度除以视频流的确定宽度，然后乘以确定的视频流高度。这导致容器的高度需要尽可能强制清洁。

除了CSS定义之外，将视频高度和宽度设置为HTML中的属性非常重要。

HTML 5视频拉伸

5 个答案: