在不保持jQuery宽高比的情况下拉伸html5视频 [英] Stretch html5 video without keeping aspect ratio in jQuery
问题描述
HTML5视频具有固有的宽高比，并且无论你的CSS告诉他们做什么，都会保留它。
HTML5 videos have intrinsic aspect ratios and tend to keep it, no matter what your CSS tells them to do.
我有一个不响应的视频容器16：9，我希望它里面的视频能够伸展到100％宽度和100％高度，即使它突破了原来的宽高比。
I have a responsive video container that isn't 16:9, and I'd like the videos inside it to stretch to 100% width and 100% height, even if it breaks their original aspect ratio.
我'我已经阅读了CSS object-fit：fill属性，这将解决我的问题，但在现代浏览器支持它之前还有很长的路要走。所以我想我必须转向使用Javascript来实现我的需要。
I've read about the CSS object-fit:fill property, which would solve my problem, but there's still a long way to go before modern browsers support it. So I guess I must turn to Javascript to achieve what I need.
我遇到了这个小提琴：
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属性。
However, I can't seem to get this code to work. The console tells me the videoWidth property cannot be read.
提前感谢您的帮助！
推荐答案
引用HTML5规范< video> 标签：
Quote from the HTML5 spec for <video> tags:
视频内容应该在元素的播放区域
内呈现，这样视频内容就会显示在播放区域的中心位置，
是完全适合它的最大可能尺寸，保留
视频内容的宽高比。因此，如果播放区域的宽高比
与
视频的宽高比不匹配，则视频将显示为letterboxed或pillarboxed。元素播放区域不包含视频的
区域代表
无。
Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.
至于videoWidth具体，它似乎是所有主流浏览器都支持，所以我不确定你的问题是什么。
As for videoWidth specifically, it seems to be supported by all major browsers, so I'm not sure what your problem is there.
据我所知，你所链接的jsfiddle中显示的CSS转换在< < ;视频> ，但它们都适用于IE10，以及最新的Chrome和Firefox。但是，我想知道您是否尝试在不是Chrome的浏览器上使用jsfiddle。您提供的脚本只添加了webkit转换，因此我对其进行了修改以对其他渲染器进行转换并增加了比率，以使效果更加明显。
To the best of my knowledge, the CSS transforms as shown in the jsfiddle you linked are not standardised in terms of their effect when it comes to <video>, but they all worked for me in IE10, and latest Chrome and Firefox. I wonder, however, if you tried to use the jsfiddle on a browser that wasn't Chrome. The script you supplied only adds webkit transforms, so I have modified it to make transforms on other renderers and increased the ratio so as to make the effect more apparent.
有一个看看这个新的。希望这是你想要的。
另外，这里是一个纯CSS的，因为javascript确实不需要进行这些更改，除非你由于某种原因需要计算新比率而不能保持静态。唯一的问题是控件不在视线范围内，所以我添加了一个自动播放属性。
Have a look at this new one. Hopefully it's what you wanted. In addition, here is a pure CSS one, as javascript really isn't required to make those changes unless you need to calculate the new ratio for some reason and can't have it static. The only issue is that the controls go out of sight, so I added an autoplay attribute.
这篇关于在不保持jQuery宽高比的情况下拉伸html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
