获得真正的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.videoWidthvideo.videoHeight一旦loadedmetadata事件触发,属性就不会被设置.这是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.