title: Javascript onloadedmetadata event not firing on iOS devices
body: <p>Part of my current project involves loading external videos through HTML5's native video tag and then resizing them with Javascript to be the full height &amp; width of the DOM.</p>
  
  <p>My code seems to work perfectly on desktop browsers, but when I load up my project on my ipad the video doesn't get resized because the <code>onloadedmetadata</code> event never gets fired.</p>
  
  <p>Here is a small code sample which reproduces the problem:</p>
  
  <pre><code>function init() {
      var video = document.getElementById('viddy');
      video.addEventListener('loadedmetadata', function(e){
          var dimensions = [video.videoWidth, video.videoHeight];
          alert(dimensions);
      });
  }
  
  document.addEventListener("DOMContentLoaded", init, false);
  
  
  &lt;video id="viddy" autoplay&gt;
      &lt;source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' /&gt;
      &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/AUSNu/213/" rel="noreferrer">http://jsfiddle.net/AUSNu/213/</a></p>
  
  <p>I've even tried coding up a solution using jQuery, on the off-chance that the event may fire, but it still doesn't.</p>
  
  <pre><code>$('#viddy').on('loadedmetadata', function() {
     alert('test');
  });
  </code></pre>
  
  <p>I even went as far as enabling remote debugging through safari on my ipad, but still no output within the console.</p>
  
  <p>Are there any workarounds to this? I couldn't find much info about this on the web / in documentation. </p>