Javascript 获得真正的HTML5视频宽度和高度

我有一个视频元素：

var video = window.content.document.createElement("video");
video.width = width;
video.height = height; 
video.style.backgroundColor = "black";
window.content.document.body.appendChild(video);

我正在通过Firefox检索它的源代码：

window.navigator.getMedia = ( window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);

window.navigator.getMedia( //constraints, sucessCallback, errorCallback
    {video: true, audio: false},
    function(stream) {
        if (window.navigator.mozGetUserMedia) 
            video.mozSrcObject = stream;
        else 
        {
            var vendorURL = window.URL || window.webkitURL;
            video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
    },
    function(err) {
        console.log("Error: " + err);
    }
);

问题是我需要知道视频的“活动区域”，它会返回0:

video.onloadedmetadata = function(){

    console.log(this.width + "x" +this.height); 
    console.log(this.videoWidth + "x" +this.videoHeight);
}

那么，如何检索真实值呢

---

您应该在视频中添加一个

loadeddata

事件监听器，然后尝试读取大小，此时有关流的足够信息已经解码，并且可以准确确定大小

尽管如此，在某些情况下，准备好维度有时需要一些时间，因此您可能需要尝试几次（延迟），直到它工作为止

这可能就是为什么它对你不起作用，但对山姆起作用

下面是我在gumhelper库中检查视频大小的方法，如果需要，可以尝试几次：

---

请注意我们是如何尝试多次的，如果不起作用，我们将“放弃”并默认为640x480。

“loadeddata”应该只触发一次。最好使用“timeupdate”反复检查视频的宽度和高度是否已设置，尤其是使用getUserMedia时，您不会真正暂停视频，而是直接进入播放状态。

实际上，这似乎是FF中的一个错误：

---

这里有两个问题：

video.videoWidth

和

video.videoHeight

属性未在触发

loadedmetadata

事件后立即设置。这是一个错误，现在已经修复（感谢@Martin Ekblom指出了这个错误）

视频本身并没有占据视频元素的整个区域，所有答案似乎都没有提及。相反，它会缩放以适合元素内部

我不认为有直接的方法可以得到活动区域的尺寸，但在我自己努力解决这个问题后，我写了一个解决方案，根据我们知道的值来计算它：

function videoDimensions(video) {
  // Ratio of the video's intrisic dimensions
  var videoRatio = video.videoWidth / video.videoHeight;
  // The width and height of the video element
  var width = video.offsetWidth, height = video.offsetHeight;
  // The ratio of the element's width to its height
  var elementRatio = width/height;
  // If the video element is short and wide
  if(elementRatio > videoRatio) width = height * videoRatio;
  // It must be tall and thin, or exactly equal to the original ratio
  else height = width / videoRatio;
  return {
    width: width,
    height: height
  };
}

本质上，我们获取视频元素的纵横比、视频的纵横比和视频元素的维度，并使用它们来确定视频占用的区域

这假设视频的拟合方法没有通过CSS修改（不确定此时是否可能，但规范允许）。关于这一点和其他一些事情的更多细节，请参阅我写的博客帖子（），灵感来自这个问题及其缺乏完整答案

---

有趣的是，虽然规范特别提到了视频周围可能的边缘（字母盒和柱形盒），但除了您的问题之外，我找不到任何其他提及。当我使用FF运行代码时，this.width和this.height返回视频元素的实际尺寸。为了测试，我将video.width和video.height设置为400，第一个控制台行返回400x400。看起来这个错误在FireFox 37（当前版本为48）中已经修复。我看不到FireFox开发者版本51.0a2中修复了这个错误。loadedmetadata事件触发后，videoWidth/videoHeight将以640 x 480的速度为我报告，这在我的情况下是错误的。@smatthews1999是从带有

标记的文件加载的视频，还是从

getUserMedia

加载的视频？@Natewami getUserMedia。我可以使用视频元素的clientWidth和clientHeight。@Nateowami你的网站已经死了。对于其他人，你可以在这里阅读他的博文：@Yay295是的，很抱歉。谢谢你发布链接。我需要把它修好。当我无意中删除服务器时，它就停止了。我遇到了同样的问题，然后从

loadedmetadata

更改为

loadedmetadata

，它成功了。谢谢