jquery - 在不保持 jQuery 纵横比的情况下拉伸(stretch) html5 视频

Question

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

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

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

我遇到了这个 fiddle :

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 属性。

Answer 1

引自 HTML5 规范 <video>标签:

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，好像是supported by all major browsers , 所以我不确定你的问题是什么。

据我所知，当涉及到 <video> 时，您链接的 jsfiddle 中显示的 CSS 转换在其效果方面并未标准化。 ，但它们都适用于 IE10、最新的 Chrome 和 Firefox。但是，我想知道您是否尝试在不是 Chrome 的浏览器上使用 jsfiddle。您提供的脚本只添加了webkit transforms，所以我修改了它以在其他渲染器上进行transforms，并增加了比例以使效果更明显。

看看this new one .希望这是你想要的。此外，here is a pure CSS one ，因为 javascript 确实不需要进行这些更改，除非您出于某种原因需要计算新比率并且不能让它保持静态。唯一的问题是控件看不见了，所以我添加了一个自动播放属性。