3

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

4

1 回答 1

3

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

视频内容应在元素的播放区域内呈现，以便视频内容以完全适合其的最大可能大小显示在播放区域的中心，同时保留视频内容的纵横比。因此，如果播放区域的纵横比与视频的纵横比不匹配，则视频将显示为信箱或邮筒。元素的播放区域中不包含视频的区域不代表任何内容。

至于 videoWidth ，似乎所有主要浏览器都支持它，所以我不确定你的问题是什么。

据我所知，您链接的 jsfiddle 中显示的 CSS 转换在<video>. 但是，我想知道您是否尝试在不是 Chrome 的浏览器上使用 jsfiddle。您提供的脚本仅添加了 webkit 转换，因此我对其进行了修改以在其他渲染器上进行转换并增加比例以使效果更明显。

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

于 2013-11-09T09:02:48.057 回答