时间戳

首页 > 解决方案 > 在js中获取html视频流的宽度和高度

javascript - 在js中获取html视频流的宽度和高度

问题描述

我试图在 html 和 js 中获取视频流的宽度和高度，它总是返回零，我不想在视频标签中指定宽度和高度，并且总是有什么自然设备视频宽度和高度然后检查它的高度和宽度是js，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video autoplay="true"></video>
<script>
    let video = document.querySelector("video")
    navigator.mediaDevices.getUserMedia({video: true})
        .then((stream) => {
            video.srcObject = stream
        })

    function vid() {
        let vidCheck = document.querySelector("video")
        console.log(vidCheck.videoWidth) // returns 0
        console.log(vidCheck.videoWidth)//returns 0
    }

    vid()
</script>
</body>
</html>

标签： javascriptvideo

解决方案

您正在使用正确的属性。您只需要等待视频播放即可使其具有大小：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <video autoplay="true"></video>
    <script>
      let video = document.querySelector("video");
      navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
        video.srcObject = stream;
      });

      video.addEventListener("playing", () => {
        console.log(video.videoWidth);
        console.log(video.videoHeight);
      });
    </script>
  </body>
</html>

推荐阅读