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

};

Answer 3

有一个很棒的自动宽度/高度技巧intrinsic ratios，可用于图像/视频等！诀窍是在包装器中包含您想要的元素，然后应用百分比值填充。

您的标记将是：

<div class="video-wrapper">
  <video class="video" id="video" onclick=playPause()></video>
</div>

你的CSS：

.video-wrapper {
  position: relative;
  padding-bottom: 20%;
  height: 0;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc; /* Random BG colour for unloaded video elements */
}

您可以通过min-width或max-width种.video-wrapper样式来限制视频容器的尺寸。

希望这有帮助！

Answer 4

我有类似的问题。我用幻灯片制作了各种对象的“幻灯片”，其中一些是不同大小的视频。我没有找到任何概念解决方案，所以我找到了一个技巧。

我明确指定了标签中的所有实际视频大小，并收集了所有这些信息：

MyModel

然后（必要时）我定义窗口大小如下：

var vids = document.getElementsByClassName("vid"); // videos
var vidl = vids.length;
var vidH = [ ];
var vidW = [ ];

// Get original widths and heights of videos
for (i=0; i<vidl; i++) { // >
    vidH.push(vids[i].height);
    vidW.push(vids[i].width);
}

要将矩形重新缩放到另一个矩形，我们必须找到最小比例：

// Current inner height of the browser window (in pixels)

var iH = window.innerHeight
         || document.documentElement.clientHeight
         || document.body.clientHeight;
// Current inner width of the browser window (in pixels)
var iW = window.innerWidth
         || document.documentElement.clientWidth
         || document.body.clientWidth;

不幸的是，这里出现了一些额外的空间;在FireFox中，我发现它的最小值为5，我将窗口高度值（iH）否定为新的视频大小。

Answer 5

在HTML5 Video dimensions in Safari IOS上张贴的高度重复问题

https://stackoverflow.com/a/60878701/2486998

中提供的纯CSS解决方案

HTML5视频适合宽度或高度

5 个答案: