HTML5视频的高度和宽度通过javascript

我想从一个简单的JavaScript视频获取和打印出宽度和高度属性，但由于某种原因，我不管理。HTML5视频的高度和宽度通过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>

非常感谢，我是一个初学者所以要点亮我。

来源

2011-07-28 3mpetri

您的视频播放效果不错吗？ –

视频是以webm格式播放的，现在只能在Chrome中播放，现在 – 3mpetri

根据您的标记，您的索引不会返回您想要的元素。该指数是基于零为节点列表是阵列状，并在0

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

编辑开始索引：对不起，没看到你说，这是第二个视频标签。在这种情况下，我并不确定，因为它适用于我：http://jsfiddle.net/3wCYz/1/

您可能想要尝试的一件事是将您使用的代码获取视频标记中侦听的处理程序中的宽度和高度在等待loadedmetadata事件：

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

其中dimensionFunction是一个函数，做你已经做什么抢尺寸。

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

来源

2011-07-28 09:37:38 kinakuta

我添加了一个监听器，也试过1秒延迟，它只在Chrome中运行良好，可能是因为其他浏览器不支持webm呢？它在Firefox中显示0 x 0时间延迟，与监听器无关。但是，嘿，在Chrome中都很好：D谢谢 – 3mpetri

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

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

HTML5视频的高度和宽度通过javascript

回答

相关问题