通过javascript HTML5视频高度和宽度 [英] HTML5 video height and width through javascript

问题描述

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

I'm trying to fetch and print out width and height attributes from video with a simple javascript, but for some reason I'm not managing.

这是javascript

This is the javascript

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

这是它影响的html5代码（这是html结构中的第二个视频标签）

and this is html5 code which it affects (this is the second video tag in html structure)

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

非常感谢，我是初学者，所以要对我很轻松。

Thanks a lot, I'm a beginner so be light on me.

推荐答案

根据您的标记，您的索引不会返回您想要的元素。该索引从零开始，因为节点列表类似于数组并且开始索引为0.

Your index, based on your markup, won't return you the element you want. The index is zero-based as node lists are array-like and start indexing at 0.

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

编辑：抱歉，没看到你说这是第二次视频标签。在那种情况下，我不确定，因为它对我有用： http://jsfiddle.net/3wCYz/1/

Edit: sorry, didn't see you said it was the second video tag. In that case, I'm not certain, because it works for me: http://jsfiddle.net/3wCYz/1/

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

One thing you might want to try is putting the code you use to get the width and height inside a handler on your video tag that listens for the loadedmetadata event:

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

其中dimensionFunction是一个函数，它可以执行您为捕获维度所做的工作。

where dimensionFunction is a function that does what you're already doing to grab the dimensions.

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

What this does is make sure the metadata for the video has downloaded before you try to grab it.

这篇关于通过javascript HTML5视频高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！