获得真正的HTML5视频的宽度和高度 [英] Getting the real HTML5 video width and height

问题描述

我有一个视频元素：

  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）; 
 $ b $ 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）; 
 
 
 
 
 
 $ b所以，我怎么检索REAL值？
 < img src =https://i.stack.imgur.com/U8vca.jpgalt =在这里输入图片描述> 
解决方案
您应该在视频中添加一个 loadeddata 事件侦听器，然后尝试读取大小，这个时候足够的信息被解码，可以准确确定。 
 
 
 
不过，在某些情况下，需要一些准备工作来准备维度，所以您可能需要尝试多次（延迟），直到它运行。 > 
 
 
这可能是为什么它不是为你工作，但它是为山姆。
 
 
 
这是我如何检查视频大小，如果需要，在我的gumhelper库中进行了几次尝试：
  https：// github。 com / sole / gumhelper / blob / master / gumhelper.js＃L38  
 
 
 
注意我们多次尝试，如果不行， up，默认为640x480。
 
I have a video element:
var video = window.content.document.createElement("video");
video.width = width;
video.height = height; 
video.style.backgroundColor = "black";
window.content.document.body.appendChild(video);
And I'm retrieving it's source via getUserMedia() on 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);
    }
);
The problem is I need to know the "active area" of video, and it's returning me 0:
video.onloadedmetadata = function(){

    console.log(this.width + "x" +this.height); 
    console.log(this.videoWidth + "x" +this.videoHeight);
}
So, how can I retrieve the REAL values?:
解决方案
You should add a loadeddata event listener to the video, and try to read the size then, which is when enough information about the stream has been decoded and the dimensions can be accurately determined. 

Still, it sometimes takes a bit in some cases to get the dimensions ready, so you might want to try several times (with delay) until it works.

That might be why it is not working for you but it's working for Sam.

Here's how I check the video size, with several attempts if required, in my gumhelper library:
https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

Notice how we try several times and if it doesn't work we "give up" and default to 640x480.

                        
这篇关于获得真正的HTML5视频的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！