HTML5视频适合宽度或高度

HTML5 video fit width OR height

本文关键字：高度 视频 HTML5      更新时间：2023-09-26

width=100% height="auto"缩放我的视频以适应浏览器窗口的整个宽度，但如果窗口的高度低于纵横比，视频的高度会被裁剪。

我希望视频按比例缩放以适应宽度或高度，这样我就可以在不裁剪的情况下看到整个视频，填充最接近的比例（如果窗口比例较低，则在两侧添加空白）。

然而，我不知道该怎么做
首先，任何高度值，%或px，似乎都被忽略了，我根本无法使用高度来设置大小，只能使用宽度。最小宽度/高度相同。

如何做到这一点？

我的代码：

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

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

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

尝试将值包装在引号中

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

我自己用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;
    }
};

在Angular中，如果视频播放器（在我的情况下是shaka播放器）是一个单独的组件，它可以完美地工作（容器的高度或宽度都会导致播放器的大小调整）

HTML

 <div id="videoContainer"        
      class="videoContainer">
   <video id="videoPlayer"></video>
 </div>

CSS

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

有一个很棒的自动宽度/高度技巧，称为内在比率，可以用于图像/视频等！诀窍是将您想要的元素放入包装器中，然后对其应用百分比值填充。

您的标记将是：

<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 */
}

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

希望这能有所帮助！

我也遇到了类似的问题。我制作了一个"幻灯片"，用各种各样的物体作为幻灯片，其中一些是各种大小的视频。我没有找到任何概念性的解决方案，所以我找到了一个技巧。

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

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;

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

var r, rh, rw;
// Scale videos to fit window
for (i=0; i<vidl; i++) { // >
    rh=iH / vidH[i]; rw=iW / vidW[i]; r=Math.min(rh, rw);
    if (rh>rw) {
       vids[i].height=Math.floor(vidH[i]*r);
       vids[i].width=iW;
    }
    else {
       vids[i].height=iH-5;
       vids[i].width=Math.floor(vidW[i]*r);
    }
}

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

Safari IOS 中HTML5视频维度发布的高度重复问题

纯CSS解决方案提供于：https://stackoverflow.com/a/60878701/2486998

您可以添加样式：

object-fit: contain;

当直接在地址栏中打开mp4时，我在用户代理样式表中发现了以下样式设置：

style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
       max-height: 100%; max-width: 100%; margin: auto;"

只需将其添加到html中的视频标签中即可，也可以随意添加。

适用于Chrome和Edge。

相关文章：