HTML 5 视频拉伸

Question

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

谢谢

原文由 TD540 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

效果很好。

 video {
  object-fit: fill;
}

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

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

值：填充

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

原文由 Leo Yu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这对我来说非常有用

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 */
 });

原文由 danivicario 发布，翻译遵循 CC BY-SA 3.0 许可协议