HTMLVideoElement：videoHeight 属性

一个整数，指定视频的固有高度（以 CSS 像素为单位）。如果元素的readyState 为 HTMLMediaElement.HAVE_NOTHING，则此属性的值为 0，因为视频或海报帧大小信息尚不可用。

一个 用户代理 通过从媒体的原始像素宽度和高度开始计算元素媒体的固有宽度和高度，然后考虑以下因素：

• 媒体的纵横比。
• 媒体的净光圈（位于媒体中心、与目标纵横比匹配的子矩形）。
• 目标设备的分辨率。
• 媒体格式所需的任何其他因素。

如果元素当前显示的是海报帧而不是渲染的视频，则海报帧的固有大小被认为是 <video> 元素的大小。

如果媒体的固有大小在任何时间发生更改，并且元素的readyState 不是 HAVE_NOTHING，则会向 <video> 元素发送一个resize 事件。当元素从显示海报帧切换到显示视频内容，或显示的视频轨道发生更改时，可能会发生这种情况。

此示例为resize 事件创建了一个处理程序，该处理程序调整<video> 元素的大小以匹配其内容的固有大小。

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 均不为零时，此操作才会应用更改。这避免了在尚无可用维度信息的真实信息时应用无效更改。