Wysokość i szerokość wideo HTML5 za pośrednictwem javascript

Question

Próbuję pobrać i wydrukować atrybuty szerokości i wysokości z wideo za pomocą prostego kodu javascript, ale z jakiegoś powodu nie zarządzam.

To javascript

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

i to jest kod HTML5, który wpływa (jest to drugi film w strukturze tag html)

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

Dzięki, jestem początkującym więc bądź dla mnie lekki.

Answer 1

Twój indeks, oparty na twoim znaczniku, nie zwróci Ci żądanego elementu. Indeks jest liczony jako listy węzłów są tablicą, jak i rozpocząć indeksowanie na 0.

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

Edytuj: Niestety, nie widział pan powiedział, że drugi znacznik wideo. W takim przypadku nie jestem pewien, ponieważ działa to dla mnie: http://jsfiddle.net/3wCYz/1/

Jedną z rzeczy, które możesz chcieć wypróbować, jest umieszczenie kodu, którego używasz, aby uzyskać szerokość i wysokość wewnątrz funkcji obsługi tagu wideo, który nasłuchuje zdarzenie loadedmetadata:

gdzie dimensionFunction to funkcja, która wykonuje to, co już robisz, aby pobrać wymiary.

To, co robi, to upewnij się, że metadane do pliku wideo zostały pobrane, zanim spróbujesz go pobrać.