如何获取HTML5 <video>元素中视频的渲染尺寸？

问题背景 #

有人建议使用videoWidth和videoHeight属性，但这两个值返回的是视频内在的原始宽高，并非屏幕上实际渲染的像素尺寸。而直接读取video.width和video.height时，却返回0：

const video = document.querySelector("video");
console.log(video.width); // 0
console.log(video.height); // 0

<video src="https://upload.wikimedia.org/wikipedia/commons/4/48/Fine-tuned-Bee-Flower-Coevolutionary-State-Hidden-within-Multiple-Pollination-Interactions-srep03988-s6.ogv" controls></video>

后续尝试getBoundingClientRect()、clientWidth/clientHeight方法，发现它们返回的是<video>元素本身的尺寸，而非视频内容的实际渲染尺寸。例如将视频设为height:100%并放入1000px高的容器中，这些方法返回的是容器高度1000px，而非视频实际渲染的高度：

const video = document.querySelector("video");
video.addEventListener('loadedmetadata', () => {
  const rect = video.getBoundingClientRect();
  console.log(rect.height); // ~1000
  console.log(video.clientHeight); // 1000
});

#container {
  outline: 3px solid red;
  height: 1000px;
}

video {
  height: 100%;
  max-width: 100%;
}

<div id="container">
  <video src="https://upload.wikimedia.org/wikipedia/commons/4/48/Fine-tuned-Bee-Flower-Coevolutionary-State-Hidden-within-Multiple-Pollination-Interactions-srep03988-s6.ogv" controls></video>
</div>

解决方案 #

要获取视频内容的实际渲染尺寸，需结合视频的原始宽高比与<video>元素的显示空间，计算出视频保持比例缩放后的真实尺寸：

实现代码 #

function getVideoRenderedSize(video) {
  // 确保视频元数据已加载，能获取原始宽高
  if (!video.videoWidth || !video.videoHeight) {
    return { width: 0, height: 0 };
  }

  // 获取元素可用显示尺寸（排除内边距、边框）
  const elementWidth = video.clientWidth;
  const elementHeight = video.clientHeight;

  // 计算视频原始宽高比与元素宽高比
  const videoAspectRatio = video.videoWidth / video.videoHeight;
  const elementAspectRatio = elementWidth / elementHeight;

  let renderedWidth, renderedHeight;

  if (elementAspectRatio > videoAspectRatio) {
    // 元素更宽，视频高度填满元素，宽度按比例缩放
    renderedHeight = elementHeight;
    renderedWidth = renderedHeight * videoAspectRatio;
  } else {
    // 元素更高，视频宽度填满元素，高度按比例缩放
    renderedWidth = elementWidth;
    renderedHeight = renderedWidth / videoAspectRatio;
  }

  // 返回取整后的实际渲染像素尺寸
  return {
    width: Math.round(renderedWidth),
    height: Math.round(renderedHeight)
  };
}

// 使用示例
const video = document.querySelector("video");
video.addEventListener('loadedmetadata', () => {
  // 监听窗口/元素尺寸变化，实时更新渲染尺寸
  window.addEventListener('resize', () => {
    const size = getVideoRenderedSize(video);
    console.log('视频实际渲染尺寸：', size);
  });

  // 初始加载时计算一次
  const size = getVideoRenderedSize(video);
  console.log('视频实际渲染尺寸：', size);
});

说明 #

• 该方法遵循视频保持原始宽高比的缩放规则，计算结果为视频内容在屏幕上实际占据的像素尺寸。
• 若需处理动态尺寸变化（如窗口缩放、容器尺寸调整），需监听resize事件重新计算。

内容的提问来源于stack exchange，提问作者Michael Haddad