Getting the real HTML5 video width and height

Question

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?:

Answer 1

There are two issues here:

1. video.videoWidth and video.videoHeight properties weren't getting set as soon as the loadedmetadata event fired. This was a bug in FireFox, which is now fixed (thanks to @Martin Ekblom for pointing out the bug).
2. The video itself doesn't take up the whole area of the video element, which none of the answers seem to have addressed. Instead, it scales to fit inside the element.

I don't think there's a direct way to get the dimensions of the active area, but after struggling with this myself, I wrote up a solution to calculate it from the values we do know:

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

Essentially, we take the aspect ratio of the video element, the aspect ratio of the video, and the dimensions of video element, and use those to determine the area the video is occupying.

This assumes the video's fitting method hasn't been modified via CSS (not sure if that's even possible at this time, but the spec allows for it). For more details on that and a few other things, see the blog post I wrote ("Finding the true dimensions of an HTML5 video’s active area"), inspired by this question and its lack of complete answers.

It's interesting to note that while the spec specifically mentions the possible edges around a video (letterboxing and pillarboxing), I wasn't able to find any other mentions of it, apart from your question.