HTML5 video height and width through javascript

问题

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.

回答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.

来源：https://stackoverflow.com/questions/6856852/html5-video-height-and-width-through-javascript