动态视频尺寸

Question

我的 HTML 页面上有视频播放器，播放器的尺寸变化取决于浏览器 window 端。所以开始时我的视频是 1280x720，当我将浏览器 window 变小时，我的视频也变小了。我想添加按钮，该按钮将打印以控制视频的当前尺寸。我这样试过：

<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>

但此代码仅打印起始尺寸 1280x720px。有人知道如何解决这个问题吗？

Answer 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

动态视频尺寸

Video dimensions dynamically

javascript

html

html5-video