在不保持 jQuery 纵横比的情况下拉伸 html5 视频答案

【问题标题】：Stretch html5 video without keeping aspect ratio in jQuery在不保持 jQuery 纵横比的情况下拉伸 html5 视频
【发布时间】：2013-07-18 03:25:01
【问题描述】：

HTML5 视频具有固有的纵横比并且倾向于保持它，无论您的 CSS 告诉他们做什么。

我有一个不是 16:9 的响应式视频容器，我希望其中的视频可以拉伸到 100% 的宽度和 100% 的高度，即使它破坏了它们的原始纵横比。

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

我遇到了这个小提琴：

http://jsfiddle.net/MxxAv/

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 属性无法读取。

【问题讨论】：

这真的对我有用。

标签： jquery html video aspect-ratio stretch

【解决方案1】：

引用<video> 标签的 HTML5 规范：

视频内容应在元素的播放区域内呈现使得视频内容显示在播放区域的中心位置完全适合它的最大可能尺寸，与视频内容的纵横比被保留。因此，如果方面播放区域的比例与屏幕的纵横比不匹配视频，视频将以信箱或邮筒显示。领域不包含视频的元素的播放区域代表什么都没有。

具体到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 确实不需要进行这些更改，除非您出于某种原因需要计算新的比率并且不能将其设为静态。唯一的问题是控件看不见，所以我添加了一个自动播放属性。

【讨论】：