动态视频尺寸

【问题标题】：Video dimensions dynamically动态视频尺寸
【发布时间】：2021-10-18 23:06:08
【问题描述】：

我的 HTML 页面上有视频播放器，播放器更改尺寸取决于浏览器窗口侧。所以在开始时我的视频是 1280x720，当我缩小浏览器窗口时，我的视频也变小了。我想添加将打印到控制台当前视频尺寸的按钮。我试过这样：

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

  <script>
      const myVideo = document.getElementById("video1");
      
      function getDimensions() {
        let height = myVideo.videoHeight;
        let width = myVideo.videoWidth;
        console.log(height, width);
      }
 </script>

但此代码仅打印 1280x720 像素的起始尺寸。有谁知道如何解决这个问题？

【问题讨论】：

标签： javascript html html5-video

【解决方案1】：

首先你需要识别元素：

element = document.getElementById('id');

现在获取有关元素大小及其相对于视口的位置的信息。

domRect = element.getBoundingClientRect();

如果我打印它：

DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Documentation

【讨论】：