javascript - 奇怪的 HTML5 视频问题

Question

请看看这个小提琴http://jsfiddle.net/rwbcf/

如果我们有 16:9 的显示：

当我们使用 16:9 以外的纵横比显示时会出现问题。

您可以在视频底部看到很大的空白空间，并且随着我们调整浏览器窗口的大小（缩小宽度）空白空间越来越大。

有没有像缩放、裁剪和缩放这样的解决方案来移除这个空白空间？我想不通。提前致谢

HTML

<div id="video-viewport">

        <video id="bg" autoplay loop preload="none" tabindex="0">

           <source src="http://goo.gl/MkY4i" type="video/mp4" />

       </video>
</div>

CSS

html, body {
    min-width:100%;
    background:#000;
    overflow:hidden;
}

body{
   margin: 0;
   padding: 0 ;
}
#bg {
    width:100%;
    height:auto;
}

#video-viewport {
    overflow: hidden;
    width:100%;
    height:100%;    
    z-index: -1; /* for accessing the video by click */
}

Answer 1

video 元素的规范说这应该发生，它等效于以下 CSS：

video { object-fit: contain; }

如果您不介意忽略纵横比，则可以更改此设置：

video { object-fit: fill; }

或者，如果您想有效放大（保留纵横比，但裁剪部分）

video { object-fit: cover; }

您可以查看浏览器对 object-fit 属性的支持。

Answer 2

我遇到了完全相同的问题，尽管空白区域像全景电影一样出现在上方和下方 - 这是完全不受欢迎的行为。

设置：视频{对象拟合：填充；}

非常适合我！

Answer 3

要删除黑色空间，视频大小应与容器大小相同，因此将其添加到您的 css 中：

#video-viewport {
    width:inherit;
    height:inherit;    
}