javascript - 如何从 HTML 视频元素获取视频的渲染大小

Question

如何获取使用 HTML5 显示的视频的渲染尺寸 <video>元素？

videoWidth 和 videoHeight 属性，建议作为 other similar (but different!) question 上的解决方案s，返回 intrinsic 视频的宽度和高度，因此它们不是解决方案。

width和height属性，分别是supposed to return the width and height of the display area ，由于某种原因返回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> 的大小。元素而不是屏幕上呈现的实际视频像素的大小。

例如，假设视频的 CSS height属性设置为100% ，及其 max-width设置为100% 。该视频位于带有 height 的 div 内的1000px 。 getBoundingClientRect().height 两者返回的值和clientHeight是 div 的大小 ( 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>

Answer 1

"How to get the rendered size of an HTML5 element?"

您可以尝试clientWidth和 clientHeight 来获取屏幕显示尺寸。
优点是您不需要等待任何元数据加载事件。
它已经在那里了。

为了进行测试，您可以向视频标记添加 width="" 属性，并在渲染的宽度/高度也发生更改时查看 clientWidth/clientHeight 是否执行您想要的操作。

请确认这是否符合您的预期结果..？

const video = document.querySelector("video");
console.log("video DISPLAY SIZE:");
console.log("clientWidth: " + video.clientWidth); //300
console.log("clientHeight: " + video.clientHeight); //150

<video width="300" 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>