通过javascript HTML5视频高度和宽度

Question

我正在尝试使用简单的javascript从视频中获取并打印出宽度和高度属性，但出于某种原因，我无法管理。

这是javascript

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

这是它影响的html5代码（这是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/

您可能想要尝试的一件事是将您用来获取视频标记处理程序内部宽度和高度的代码用于侦听loadedmetadata事件：

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

其中dimensionFunction是一个函数，可以执行您已经在抓取维度的操作。

这样做可以确保在您尝试抓取视频之前已下载视频的元数据。