伸展html5视频而不保留纵横比jQuery

无论您的CSS告诉他们做什么，HTML5视频都具有固有的纵横比，并且倾向于保留它。伸展html5视频而不保留纵横比jQuery

我有一个不是16：9的响应式视频容器，并且我希望它内部的视频伸展到100％宽度和100％高度，即使它打破了它们的原始高宽比。

我已阅读了关于CSS object-fit：fill属性，它可以解决我的问题，但在现代浏览器支持它之前还有很长的路要走。所以我想我必须转向Javascript来实现我所需要的。

我碰到这个小提琴：

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 + ')') 
} 
} 

$(function() { 
$("#testVideo").click(function(evt) { 
    scaleToFill(document.getElementsByTagName("video")[0]); 
}); 
});

不过，我似乎无法获得此代码工作。控制台告诉我无法读取videoWidth属性。

在此先感谢您的帮助！

来源

2013-07-18 Tom S.

这真的对我有用。 –

从HTML5规范报价为<video>标签：

视频内容要元素的播放区域内呈现使得视频内容居中显示在播放区域在的最大可能大小适合完全在其中，视频内容的宽高比被保留。因此，如果播放区域的比例与视频的宽高比不匹配，则视频将显示为信箱或邮筒。区域范围元素的播放区域不包含视频代表什么都没有。

至于videoWidth具体来说，它似乎是supported by all major browsers，所以我不知道你的问题在那里。

就我所知，在链接的jsfiddle中显示的CSS转换在<video>的效果上并不标准化，但它们在IE10和最新的Chrome和Firefox中都适用于我。不过，我想知道，如果您尝试在不是Chrome的浏览器上使用jsfiddle。您提供的脚本仅添加webkit转换，因此我已对其进行了修改以在其他渲染器上进行转换，并增加了比率以使效果更加明显。

看一看this new one。希望这是你想要的。另外，here is a pure CSS one，因为JavaScript确实不需要进行这些更改，除非由于某些原因需要计算新比率并且不能使其为静态。唯一的问题是控件不可见，所以我添加了自动播放属性。

来源

2013-11-09 09:02:48 mirichan

伸展html5视频而不保留纵横比jQuery

回答

相关问题