如何获取HTML自适应窗口video元素的当前实际显示尺寸？

你使用的videoWidth和videoHeight是video元素的原生属性，返回的是加载的视频源文件的固有原始分辨率，只要视频文件本身没有更换，这两个值就固定为1280和720，和页面上实际渲染的显示尺寸无关。

要获取视频当前在页面中实际显示的尺寸，读取video元素的布局尺寸属性即可，常规自适应场景下使用clientWidth/clientHeight即可，这两个属性返回元素内容区域的实时渲染尺寸，会随浏览器窗口缩放同步变化。

修改后的代码如下：

<button onclick="getDimensions()">getDimensions</button>

<script>
    const myVideo = document.getElementById("video1");
    
    function getDimensions() {
      let displayHeight = myVideo.clientHeight;
      let displayWidth = myVideo.clientWidth;
      console.log(displayWidth, displayHeight);
    }
</script>

补充说明 #

如果你需要包含边框、内边距的整体占位尺寸，可以把clientWidth/clientHeight替换为offsetWidth/offsetHeight。如果你的video标签设置了object-fit属性做特殊缩放适配，需要拿到视频内容本身在容器内的绘制尺寸的话，再结合videoWidth/videoHeight的比例做额外计算即可，常规自适应场景下上述代码可直接满足需求。

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