Ancho y ancho de video HTML5 a través de javascript

Question

Estoy intentando buscar e imprimir los atributos de ancho y alto del video con un simple javascript, pero por alguna razón no lo estoy administrando.

Este es el javascript

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

y esto es código HTML 5, que afecta (esta es la segunda etiqueta de vídeo en la estructura html)

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

Muchas gracias, soy un principiante así que sé ligero conmigo.

Answer 1

Su índice, basado en su marcado, no le devolverá el elemento que desea. El índice está basado en cero como listas de nodos son tipo array y empezar a indexar a 0.

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

Editar: lo siento, no vi que habías dicho que era la segunda etiqueta de vídeo. En ese caso, no estoy seguro, porque funciona para mí: http://jsfiddle.net/3wCYz/1/

Una cosa que tal vez quiera probar es poner el código que usa para obtener el ancho y la altura dentro de un controlador en su etiqueta de video que escucha el evento loadedmetadata:

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

donde dimensionFunction es una función que hace lo que ya se está haciendo para agarrar las dimensiones.

Lo que hace esto es asegurarse de que los metadatos del video se hayan descargado antes de intentar tomarlo.