HTML5 video height and width through javascript

Question

I'm trying to fetch and print out width and height attributes from video with a simple javascript, but for some reason I'm not managing.

This is the javascript

video = document.getElementsByTagName("video")[1];
span1 = document.getElementById("dimensions");
span1.innerHTML = video.videoWidth + " x " + video.videoHeight;

and this is html5 code which it affects (this is the second video tag in html structure)

<figure>
<video controls>
<source src="video.webm" type="video/webm">
</video>
</figure>
<p>
Dimensions: <span id="dimensions"></span>
</p>

Thanks a lot, I'm a beginner so be light on me.

Answer 1

Your index, based on your markup, won't return you the element you want. The index is zero-based as node lists are array-like and start indexing at 0.

var video = document.getElementsByTagName("video")[0];

Edit: sorry, didn't see you said it was the second video tag. In that case, I'm not certain, because it works for me: http://jsfiddle.net/3wCYz/1/

One thing you might want to try is putting the code you use to get the width and height inside a handler on your video tag that listens for the loadedmetadata event:

video.addEventListener("loadedmetadata", dimensionFunction, false);

where dimensionFunction is a function that does what you're already doing to grab the dimensions.

What this does is make sure the metadata for the video has downloaded before you try to grab it.