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

请注意，这仅在 videoWidth 和 videoHeight 均非零时才应用更改。这可以避免在尚未获得有效尺寸信息时应用无效更改。

规范

浏览器兼容性