HTML5视频适合宽度或高度

Question

该width=100% height="auto"秤我的影片,以适应浏览器窗口的整个宽度,但如果窗口的高度比纵横比的视频被高度裁剪低.

我希望视频缩放以适合宽度或高度,使得我总能看到整个视频,而无需作物,填充最接近比(添加空的空间侧面如果窗口比较低).

但是,我无法弄清楚如何做到这一点.
首先,任何高度值,%或px,似乎都被忽略,我无法使用高度,只有宽度来设置大小.最小宽度/高度相同.

如何才能做到这一点？

我的代码:

<video id="video" width=100% height="auto" onclick=playPause()></video>

视频由javascript加载,其中v是来自数组的视频链接:

video.addEventListener('play', function() { v.play();}, false);

Answer 1

尝试将值包装在引号内

<div class="videoContainer">
   <video id="video" width="100%" height="auto" onclick="playPause();"></video>
</div>

你可以添加这些类

.videoContainer
{
   position:absolute;
   height:100%;
   width:100%;
    overflow: hidden;
}

.videoContainer video
{
  min-width: 100%;
  min-height: 100%;
}

或者使用它

video {
  object-fit: cover;
}

Answer 2

自己用javascript函数解决了这个问题：

window.addEventListener('resize', resize, false);

video.height = 100; /* to get an initial width to work with*/
resize();

function resize() {
videoRatio = video.height / video.width;
windowRatio = window.innerHeight / window.innerWidth; /* browser size */

    if (windowRatio < videoRatio) {
        if (window.innerHeight > 50) { /* smallest video height */
                video.height = window.innerHeight;
        } else {
            video.height = 50;
    }
    } else {
        video.width = window.innerWidth;
    }

};