DOM

：

：

HTMLVideoElement.videoWidth プロパティ

　編集：2022.11.10 by T.A.

[Edge]。読取専用。→、、

HTMLVideoElement の ビデオの元の画素構成の横ピクセルを表す数値で返します。

mdn： CSS ピクセルで表されたビデオの固有の幅を示します。簡単に言えば、これは自然なサイズのメディアの幅です。

mdn： 詳細については、「固有の幅と高さについて」を参照してください。

構文
HTMLVideoElement.videoWidth
HTMLVideoElement HTMLVideoElement。
値

整数数値。

mdn： ビデオの固有の幅を CSS ピクセルで指定する整数値。要素の readyState が HTMLMediaElement.HAVE_NOTHING の場合、ビデオもポスターのフレーム サイズ情報もまだ利用できないため、このプロパティの値は 0 です。

固有の幅と高さについて／mdn

ユーザー エージェントは、メディアの生のピクセルの幅と高さから始めて、次のような要素を考慮して、要素のメディアの固有の幅と高さを計算します。

要素が現在レンダリングされたビデオではなくポスター フレームを表示している場合、ポスター フレームの固有のサイズは <video> 要素のサイズと見なされます。

メディアの固有のサイズが変更され、要素の readyState が HAVE_NOTHING でない場合はいつでも、resize イベントが <video> 要素に送信されます。これは、要素がポスター フレームの表示からビデオ コンテンツの表示に切り替わったとき、または表示されたビデオ トラックが変更されたときに発生する可能性があります。

関連

videoHeight。

例
／mdn

この例では、コンテンツの固有のサイズに一致するように <video> 要素のサイズを変更する resize イベントのハンドラーを作成します。 

let v = document.getElementById("myVideo");

v.addEventListener("resize", ev => {
  let w = v.videoWidth;
  let h = v.videoHeight;

  if (w && h) {
    v.style.width = w;
    v.style.height = h;
  }
}, false);

これは、videoWidth と videoHeight の両方がゼロ以外の場合にのみ変更を適用することに注意してください。これにより、ディメンションについて利用可能な真の情報がまだない場合に無効な変更を適用することを回避できます。

HTML： 

<VIDEO id=IdTest width=300 height=100 style="background-color:#dfd" src="../../Sample/Eizou_M.mp4"></VIDEO>

JavaScript： 

D=IdTest.videoWidth;  //＝[number]：320
DA=IdTest.videoHeight;  //＝[number]：264

元のビデオの構成サイズが得られた。

テスト