获取真正的 HTML5 视频宽度和高度答案

【问题标题】：Getting the real HTML5 video width and height获取真正的 HTML5 视频宽度和高度
【发布时间】：2013-06-08 01:02:23
【问题描述】：

我有一个视频元素：

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

我正在通过 Firefox 上的 getUserMedia() 检索它的源代码：

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);
}

那么，如何检索 REAL 值？：

【问题讨论】：

当我使用 FF 运行您的代码时，this.width 和 this.height 返回视频元素的实际尺寸。只是为了测试，我将 video.width 和 video.height 设置为 400，第一条控制台行返回 400x400。

标签： javascript html firefox-addon html5-video firefox-addon-sdk

【解决方案1】：

这里有两个问题：

video.videoWidth 和 video.videoHeight 属性不会在 loadedmetadata 事件触发后立即设置。这是 bug in FireFox，现在已修复（感谢 @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 修改（不确定目前是否可行，但规范允许）。有关这方面和其他一些事情的更多详细信息，请参阅我写的博客文章 ("Finding the true dimensions of an HTML5 video’s active area")，灵感来自这个问题及其缺乏完整的答案。

有趣的是，虽然规范特别提到了视频周围可能存在的边缘（信箱和邮筒），但除了您的问题之外，我找不到任何其他提及。

【讨论】：

我认为这在 FireFox Developers 版本 51.0a2 中没有得到修复。在加载元数据事件触发后，我会以 640 x 480 为我报告 videoWidth/videoHeight，在我的情况下这是错误的。
@smatthews1999 视频是从带有<video> 标签的文件加载的，还是从getUserMedia 加载的？
@Natewami getUserMedia。我能够使用视频元素的 clientWidth 和 clientHeight。
@Nateowami 你的网站已经死了。对于其他所有人，您可以在此处阅读他的博客文章：nathanielpaulus.wordpress.com/2016/09/04/…
@Yay295 是的，很抱歉。感谢张贴的链接。我需要把它修好。当我无意中删除服务器时，它崩溃了。

【解决方案2】：

您应该在视频中添加一个loadeddata 事件监听器，然后尝试读取大小，此时有关流的足够信息已被解码并且可以准确确定尺寸。

不过，在某些情况下，有时需要一些时间才能准备好尺寸，因此您可能需要尝试多次（有延迟）直到它起作用。

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

以下是我在 gumhelper 库中检查视频大小的方法，如果需要，可以尝试多次： https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

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

【讨论】：

我遇到了同样的问题，然后从 loadedmetadata 更改为 loadeddata 并且它起作用了。谢谢！

【解决方案3】：

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

【讨论】：

【解决方案4】：

实际上这似乎是FF中的一个错误： https://bugzilla.mozilla.org/show_bug.cgi?id=926753

【讨论】：

看起来这个错误已在 FireFox 37（当前版本为 48）中修复。