使用jQuery在不保持宽高比的情况下拉伸html5视频

Question

HTML5视频具有固有的宽高比，无论你的CSS要求什么，它们都倾向于保持这个宽高比。

我有一个响应式视频容器，但它不是16:9的，我希望容器内的视频可以拉伸到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属性。

- Tom S.

---

这对我真的很有效。 - Lauris Kuznecovs

Answer 1

<video>标签的HTML5规范中提到：

视频内容应该在元素的播放区域内呈现，使得视频内容居中显示在播放区域内，同时尽可能以最大的尺寸完全适合其中，保持视频内容的宽高比。因此，如果播放区域的宽高比与视频的宽高比不匹配，则视频将被显示为有黑边或者有白边的画面。元素播放区域中不包含视频的部分表示为空。

至于特定的videoWidth属性，似乎所有主流浏览器都支持，所以我不确定您的问题是什么。

据我所知，您提供的jsfiddle中展示的CSS变换在涉及<video>时并没有标准化其效果，但它们在IE10、最新版Chrome和Firefox中均可正常工作。不过，我想知道您是否尝试在非Chrome浏览器上使用jsfiddle。您提供的脚本仅添加了webkit变换，因此我已经对其进行了修改，以便在其他渲染器上进行变换，并增加了比例以使效果更加明显。

请查看这个新链接。希望它是您想要的。 此外，这里有一个纯CSS的链接，因为除非您需要计算新比例并且不能将其静态化，否则不需要使用javascript来进行这些更改。唯一的问题是控件会消失，因此我添加了autoplay属性。

- mirichan