Chiều cao và chiều rộng của video HTML5 thông qua javascript

Question

Tôi đang cố tìm nạp và in các thuộc tính chiều rộng và chiều cao từ video bằng javascript đơn giản, nhưng vì một lý do nào đó mà tôi không quản lý.

Đây là javascript

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

và đây là mã html5 mà nó ảnh hưởng đến (đây là thẻ video thứ hai trong cấu trúc html)

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

Cảm ơn rất nhiều, tôi là một người mới bắt đầu nên nhẹ nhàng với tôi.

Answer 1

Chỉ mục của bạn, dựa trên đánh dấu của bạn, sẽ không trả về phần tử bạn muốn. Chỉ số này là zero-based như danh sách nút là mảng giống như và bắt đầu lập chỉ mục tại 0.

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

Sửa: xin lỗi, không thấy bạn cho biết đây là thẻ video thứ hai. Trong trường hợp đó, tôi không chắc chắn, vì nó hoạt động cho tôi: http://jsfiddle.net/3wCYz/1/

Một điều bạn có thể muốn thử là đặt mã bạn sử dụng để lấy chiều rộng và chiều cao bên trong trình xử lý trên thẻ video của bạn sự kiện loadedmetadata:

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

nơi dimensionFunction là chức năng thực hiện những gì bạn đã làm để lấy thứ nguyên.

Điều này có nghĩa là đảm bảo siêu dữ liệu cho video đã tải xuống trước khi bạn cố gắng lấy.