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

Question

我有一个视频元素：

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值？：

Answer 1

这里有两个问题：

1. video.videoWidth loadedmetadata事件触发，就不会设置video.videoWidth和video.videoHeight属性。 这是FireFox中的一个错误，现在已经修复了（感谢@Martin Ekblom指出了这个错误）。
2. 视频本身并没有占据视频元素的整个区域，这些答案似乎都没有解决。 相反，它会缩放以适合元素内部。

我不认为有一个直接的方法来获得活动区域的维度，但在我自己努力解决之后，我写了一个解决方案，从我们知道的值来计算它：

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修改（不确定此时是否可能，但规范允许）。 有关该内容和其他一些内容的更多详细信息，请参阅我撰写的博客文章（ “查找HTML5视频活动区域的真实尺寸” ），受此问题的启发及其缺乏完整答案。

有趣的是，虽然规范明确提到视频周围可能出现的边缘（信箱和邮筒），但除了你的问题之外，我无法找到任何其他的提及。

Answer 2

您应该向视频添加一个loadeddata事件侦听器，然后尝试读取大小，这时解码了有关流的足够信息并且可以准确地确定维度。

尽管如此，在某些情况下，有时需要花费一些时间来准备尺寸，因此您可能需要尝试多次（延迟）直到它工作。

这可能就是为什么它不适合你，但它适用于Sam。

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

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

Answer 3

“loadeddata”应该只发射一次。 最好使用“timeupdate”重复检查是否已设置视频宽度和高度，特别是在没有真正暂停视频的getUserMedia中，而是直接进入播放状态。

Answer 4

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