javascript - 奇怪的 HTML5 视频问题

Question

请看看这个 fiddle 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

视频元素的规范表明应该发生这种情况，它相当于以下 CSS:

video { object-fit: contain; }

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

video { object-fit: fill; }

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

video { object-fit: cover; }

您可以check out browser support for the object-fit property .