通过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>

非常感谢，我是初学者，请对我温柔一点。

- 3mpetri

---

视频以webm格式呈现，目前只能在Chrome浏览器中播放。 - 3mpetri

Answer 1

根据你的标记，你的索引无法返回所需的元素。由于节点列表类似于数组并且从0开始索引，因此索引是基于零的。

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

编辑: 对不起，我没有看到您说是第二个视频标签。在这种情况下，我不确定，因为它对我有效: http://jsfiddle.net/3wCYz/1/

您可以尝试的一个方法是，在视频标记上添加一个侦听"loadedmetadata"事件的处理程序，并将用于获取宽度和高度的代码放在其中：

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

其中dimensionFunction是一个函数，它执行了你已经在进行的抓取尺寸的操作。

这做的是确保在尝试获取元数据之前视频的元数据已经被下载。

- kinakuta

---

我添加了一个监听器，也尝试了1秒的延迟，在Chrome中运行良好，可能是因为其他浏览器还不支持webm格式？ 在Firefox中以时间延迟显示0 x 0，在监听器中则没有任何显示。但嘿，在Chrome中一切都很好 :D 谢谢 - 3mpetri

@3mpetri 在这种情况下，您应该将脚本移动到HTML代码下面。或者使您的脚本在onload事件中执行。我强烈建议不要使用延迟。 - Sanghyun Lee

同意将其放置在onload事件中。为了使其可在其他支持html5的浏览器上播放，只需对其进行mp4和ogv编码，您就可以覆盖每个浏览器。使用各种免费工具进行编码非常容易 - 我使用Miro Converter：http://www.mirovideoconverter.com/ - kinakuta