web-dev-qa-db-ja.com

HTML5ビデオフィット幅OR高さ

width=100% height="auto"は、ブラウザウィンドウの幅全体に合わせてビデオを拡大縮小しますが、ウィンドウの高さがアスペクト比よりも低い場合、ビデオの高さが切り取られます。

ビデオを幅または高さに合わせて拡大縮小して、トリミングせずに常にビデオ全体を表示し、最も近い比率を埋めるようにします（ウィンドウの比率が低い場合は、側面に空のスペースを追加します）。

ただし、これを行う方法がわかりません。
最初に高さの値（％またはpx）は無視されているようです。幅だけで高さを使用してサイズを設定することはできません。 min-width/heightについても同様です。

これはどのように行うことができますか？

私のコード：

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

ビデオはjavascriptによって読み込まれます。vは配列からのビデオリンクです。

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

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

};
4
stackinista

値を引用符で囲んでみてください

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

同様の問題がありました。スライドとしてさまざまなオブジェクトを使用して「スライドショー」を作成しました。それらのいくつかはさまざまなサイズのビデオです。概念的な解決策は見つからなかったので、トリックを見つけました。

すべての実際のビデオサイズをタグで明示的に指定し、それらすべての情報を収集しました。

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）を新しいビデオサイズとして打ち消すものです。

0
Mike Golub

Safari IOSの HTML5ビデオディメンションに投稿された高さの重複問題

提供される純粋なCSSソリューション： https://stackoverflow.com/a/60878701/2486998

0
Joel Karunungan

画像/動画などで使用できる 固有比率 と呼ばれる優れた自動幅/高さのトリックがあります！コツは、希望する要素をラッパーに入れ、ラッパーにパーセント値のパディングを適用することです。

マークアップは次のようになります。

<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を使用して、ビデオコンテナーのサイズを制限できます。

お役に立てれば！

0
kano