HTML5视频适合宽度或高度 [英] HTML5 video fit width OR height

问题描述

width = 100％height ="auto" 缩放我的视频以适合浏览器窗口的整个宽度，但是如果窗口的高度低于长宽比，则会裁剪视频高度.

The width=100% height="auto" scales my videos to fit the whole width of the browser window, but if the height of the window is lower than the aspect ratio the video gets cropped in height.

我希望视频按比例缩放以适合宽度或高度，以使我始终可以看到整个视频而没有裁剪，并填充最接近的比例(如果窗口比例较低，则在两侧增加空白区域).

I want the video to scale to fit either width or height so that I can always see the whole video without crop, filling the closest ratio (adding empty space to sides if window ratio is lower).

但是我不知道该怎么做.
首先，似乎忽略了任何高度值(％或px)，我根本无法使用高度(仅宽度)来设置尺寸.最小宽度/高度相同.

I can't figure out how to do this however.
First any height value, % or px, seems to be disregarded, I can't set the size at all using height, only width. Same for min-width/height.

这怎么办?

我的代码:

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

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

Video is loaded by javascript where v is a video link from an array:

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

推荐答案

使用javascript函数自行解决:

Solved it myself with a javascript function:

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;
    }

};

这篇关于HTML5视频适合宽度或高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！