Leo*_* Yu 85
我已经使用object-fit进行了测试:填写CSS
效果很好.
video {
object-fit: fill;
}
来自MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中.
价值:填写
替换的内容大小适合填充元素的内容框:对象的具体对象大小是元素的使用宽度和高度.
Bri*_*ell 37
视频内容应该在元素的回放区域内呈现,使得视频内容以最大可能尺寸放置在回放区域的中心,完全适合其中,并保留视频内容的宽高比.因此,如果回放区域的宽高比与视频的宽高比不匹配,则视频将显示为letterboxed或pillarboxed.元素回放区域中不包含视频的区域不代表任何内容.
没有规定拉伸视频而不是信箱.这可能是因为拉伸会给用户带来非常糟糕的体验,并且大部分时间都不是预期的.默认情况下,图像会被拉伸以适应,因此,您会看到许多图像在线严重扭曲,很可能是由于指定高度和宽度时出现的简单错误.
您可以使用CSS 3转换实现拉伸效果,尽管这些尚未完全标准化或在所有浏览器中实现,并且实现它的那些,您需要使用诸如-webkit-或的供应商前缀-moz-.这是一个例子:
<!DOCTYPE html>
<style>
video {
-webkit-transform: scaleX(2);
-moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>
这对我很有用
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 */
});