获取视频元素的渲染大小

Question

如何获取 HTML5 <video> 元素的

rendered

大小？

videoWidth

和

videoHeight

属性，建议作为其他类似（但不同！）问题的解决方案，返回内在宽度和高度，因此它们不是解决方案。

width

和

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>

有什么建议吗？

Answer 1

如何获取 HTML5 元素的渲染尺寸？

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

为了进行测试，您可以向视频标签添加

width=""

属性，并在渲染的宽度/高度也发生更改时查看 clientWidth / clientHeight 是否执行您想要的操作。

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

const video = document.querySelector("video");
console.log("video DISPLAY SIZE:");
console.log("clientWidth: " + video.clientWidth); //320
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>