Question

HTML5视频具有固有的宽高比，并且无论您的CSS告诉他们做什么，都会保留它。

我有一个响应式视频容器，不是16：9，我希望它内部的视频可以拉伸到100％宽度和100％高度，即使它打破了原始的宽高比。

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

我遇到了这个小提琴：

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

引用<video>代码的HTML5规范：

视频内容应在元素的播放区域内呈现使得视频内容以回放区域为中心显示最大可能的尺寸，完全适合它，与视频内容的宽高比得以保留。因此，如果方面播放区域的比例与宽高比不匹配视频，视频将显示为letterboxed或pillarboxed。的领域元素的播放区域不包含视频表示什么都没有。

至于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实际上不需要进行这些更改，除非您出于某种原因需要计算新比率并且不能保持静态。唯一的问题是控件不在视线范围内，所以我添加了一个自动播放属性。

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

1 个答案: