title: <video> and onloadedmetadata-event
body: <p>I'd like to use the dimensions of a HTML5 video element in JavaScript. The <code>video</code>-tag itself does not have any dimensions set, so I expect it to scale to the size of the video (which it does). My markup looks like this:</p>
  
  <pre><code>&lt;video id="viddy" autoplay&gt;
  &lt;source src="myvideo.mp4" type='video/mp4; codecs="avc1.42E01E"' /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>When I just use jQuery to get the element's <code>height()</code> and/or <code>width()</code> I will get a default value of 300 as it will not wait for the video to load.
  So what I found out on the web (<a href="http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video/" rel="noreferrer">here</a> and <a href="http://msdn.microsoft.com/en-us/library/ie/ff974157%28v=vs.85%29.aspx" rel="noreferrer">here</a>) is that I should be waiting for the <code>onloadedmetadata</code>-event. So I am trying to do the following in my JS:</p>
  
  <pre><code>var video = document.getElementById('viddy');
  video.onloadedmetadata = function(e){
  var dimensions = [video.videoWidth, video.videoHeight];
  alert(dimensions);
  } 
  </code></pre>
  
  <p>Yet, the event will never fire (although the video will load and play) and I'll never get my dimensions. Same happens with a jQuery-<code>bind('load',</code> and every other way I could think of. Any idea? Thanks.</p>