HTML5视频高度和宽度通过javascript

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 是一个函数，可以执行您已经在执行的操作来获取维度。

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