获得真正的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

这里有两个问题：

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

我认为没有直接的方法可以获得活动区域的维度，但在自己挣扎之后，我写了一个解决方案，根据我们知道的值来计算它：

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"），其灵感来自于此问题及其缺乏完整答案。

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

Answer 2

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

但是，在某些情况下，有时需要花一些时间来准备尺寸，所以你可能想尝试几次（有延迟）直到它工作。

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

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

请注意我们如何尝试多次，如果它不起作用，我们会放弃＆＃34;默认为640x480。

Answer 3

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

Answer 4

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