HTML5 видео высота и ширина через JavaScript

Question

Я пытаюсь извлечь и распечатать атрибуты ширины и высоты из видео с помощью простого javascript, но по какой-то причине мне не удается.

Это JavaScript

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

и это HTML-код, на который он влияет (это второй тег видео в структуре HTML)

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

Большое спасибо, я новичок, так что будьте осторожны со мной.

Answer 1

Ваш индекс, основанный на вашей разметке, не вернет вам нужный элемент. Индекс начинается с нуля, поскольку списки узлов похожи на массивы и начинают индексирование с 0.

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

Редактировать : извините, не видел, что вы сказали, что это был второй тег видео. В этом случае я не уверен, потому что это работает для меня: http://jsfiddle.net/3wCYz/1/

Одна вещь, которую вы, возможно, захотите попробовать, это поместить код, который вы используете для получения ширины и высоты, в обработчик вашего видео-тега, который прослушивает событие Загруженные метаданные:

* * 1010

где dimensionFunction - это функция, которая делает то, что вы уже делаете, чтобы получить размеры.

Перед загрузкой убедитесь, что метаданные видео загружены.