5

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.

3mpetri
  • 599
  • 1
  • 9
  • 26

1 Answers1

11

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.

kinakuta
  • 9,029
  • 1
  • 39
  • 48
  • I added a listener, also tried with 1 second delay, it works well only in Chrome, probably because other browsers do not support webm yet? It displays 0 x 0 in Firefox with time delay, and nothing with listener. But hey, all well in Chrome :D thanks – 3mpetri Jul 31 '11 at 21:48
  • @3mpetri In that case, you should move your script below html code. Or make your script executed inside `onload` event. I strongly recommend not using delay. – Sanghyun Lee Aug 01 '11 at 00:15
  • 1
    Agreed on putting it inside the onload event. To have it available to play on other browsers, just encode it for mp4 and ogv and you'll have covered every browser that supports html5. It's super easy to do the encoding with a variety of free tools - I use Miro Converter: http://www.mirovideoconverter.com/ – kinakuta Aug 01 '11 at 03:52