如何获取HTML video元素的尺寸？已尝试块元素及clientWidth/Height无效

你拿不到video尺寸通常是因为元素还没完成渲染、视频元数据未加载，或是没有明确的尺寸定义，以下是可行的解决方法：

• 等待DOM完全加载
  确保在DOM结构渲染完成后再获取元素尺寸，避免脚本执行时video还未被解析：

  document.addEventListener('DOMContentLoaded', () => {
    const video = document.querySelector('video');
    console.log(video.clientWidth, video.clientHeight);
  });
  

• 监听视频元数据加载事件
  如果video已设置src但还没加载视频元数据，元素的真实播放尺寸还未确定，需监听loadedmetadata事件：

  const video = document.querySelector('video');
  video.addEventListener('loadedmetadata', function() {
    // 此时可获取视频的原生尺寸或布局尺寸
    console.log(this.clientWidth, this.clientHeight);
    // 也可使用offsetWidth/offsetHeight，效果一致
    console.log(this.offsetWidth, this.offsetHeight);
  });
  

• 显式定义元素宽高
  若没有视频源，可直接给video设置固定宽高样式，这样无需加载视频也能拿到尺寸：

  <video style="display: block; width: 640px; height: 360px;"></video>
  

• 使用getBoundingClientRect()方法
  这个方法能返回元素的精确布局边界信息，包括宽高，即使元素未完全渲染也能获取到当前的布局尺寸：

  const video = document.querySelector('video');
  const rect = video.getBoundingClientRect();
  console.log(rect.width, rect.height);
  

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