HTML5 视频适合宽度或高度

Question

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

我希望视频可以缩放以适应宽度或高度，这样我就可以始终看到没有裁剪的整个视频，填充最接近的比例（如果 window 比例较低，则在两侧添加空白区域）。

但是我不知道该怎么做。
首先，任何高度值（% 或 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

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

您的标记将是：

<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来限制视频容器的尺寸。

希望这可以帮助！

Answer 4

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

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

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) 否定为新的视频大小。

Answer 5

在 Safari IOS 中以HTML5 视频尺寸发布的高度上的重复问题

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

Answer 6

您可以添加样式：

object-fit: contain;

Answer 7

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