为什么 video.width 是 0 但实际上是 539？答案

【问题标题】：Why video.width is 0 but in fact it is 539?为什么 video.width 是 0 但实际上是 539？
【发布时间】：2019-11-11 15:18:14
【问题描述】：

这是一张图片

和宽度和高度不是 0，但是当我在控制台中打印它时，它返回 0。

这是我如何打印的代码：

const video = document.getElementById("remoteVideo");
video.addEventListener('play', () => {
      setInterval(async () => {
      console.log(video.width);
      console.log(video.height);
      }, 100)
    });

这里是完整的html：

<!DOCTYPE html>
<html lang="en"></html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
      html { height: 100%; }
      body { height: 100%; margin: 0; background: #111; text-align: center; }
      #remoteVideo { height: 70%; margin-top: 5%; background: #000; }
      #localVideo { width: 20%; position: absolute; right: 1.1em; bottom: 1em; border: 1px solid #333; background: #000; }
      #callButton { position: absolute; display: none; left: 50%; font-size: 2em; bottom: 5%; border-radius: 1em; }
  </style>
  <script defer src="static/face-api.min.js"></script>

</head>
<body>

    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    <button id="callButton" onclick="createOffer()">✆</button>

    <script src="/socket.io/socket.io.js"></script>
    <script defer src="static/script.js"></script>
</body>
</html>

我做错了什么？

【问题讨论】：

你也可以给我们看看你的 HTML 吗？
使用 getBoundingClientRect
看这里stackoverflow.com/a/294273/3209523
Getting the real HTML5 video width and height的可能重复
getBoundingClientRect() 有效，非常感谢

标签： javascript html

【解决方案1】：

你可以使用

getBoundingClientRect 没有异步

您可以使用https://www.pexels.com/videos/ 在Minimal, Reproducible Example 中发布您的问题

const video = document.getElementById("remoteVideo");
video.addEventListener('play', () => {
    console.log(video.getBoundingClientRect() );
});

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: yellow;
  text-align: center;
}

#remoteVideo {
  height: 70%;
  margin-top: 5%;
  background: red;
}

#localVideo {
  width: 20%;
  position: absolute;
  right: 1.1em;
  bottom: 1em;
  border: 1px solid #333;
  background: pink;
}

#callButton {
  position: absolute;
  display: none;
  left: 50%;
  font-size: 2em;
  bottom: 5%;
  border-radius: 1em;
}

<video id="localVideo" src="https://player.vimeo.com/external/357005099.sd.mp4?s=a95b2118e2fa52097ad9933b56d50ebcc9f2f1c9&profile_id=139&oauth2_token_id=57447761" autoplay muted>Video</video>
<video id="remoteVideo" autoplay src="https://player.vimeo.com/external/340284081.sd.mp4?s=00350f6e127d8ac3777d74528fa439944f7d9f2c&profile_id=139&oauth2_token_id=57447761">Video</video>
<button id="callButton" onclick="createOffer()">Button ✆</button>

【讨论】：