通过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是一个函数,可以执行您已经在抓取维度的操作.

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