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