title: Firefox loadedmetadata event
body: <p>When I used the event handler:</p>
  
  <p>video.on("loadedmetadata", function() {...})</p>
  
  <p>Firefox does not seem to set the video dimensions properly when the callback is called. Chrome works perfectly fine. Is there a way to get the video dimensions correctly on firefox?</p>
  
  <p>EDIT: 
  It seems to work if I put a debugger and run through the code manually. That lead me to believe it's some sort of race condition. But that doesn't make sense to me since the method is being called which means the event should have properly occurred = dimensions should be set.</p>
  
  <p>Here is a code snippet:</p>
  
  <pre><code>$("document").ready () -&gt;
      # Setup variables
      video = $("#video")
      toolbar = $("#toolbar")
      canvas = $("#filter")
      context = canvas.get(0).getContext('2d')
  
      # Setup webcam
      # I have a separate webcam module that simply wraps the behavior of 
      # navigator.getMediaStream. Works fine in chrome.
      webcam.setup(() -&gt; alert("Browser Unsupported."))
      webcam.getMedia({video:true}, (localMediaStream) -&gt;
          video.attr("src", window.URL.createObjectURL(localMediaStream))
  
          # Video loaded event
          video.on "loadedmetadata", (e) -&gt;
              # Turn on video controls
              video.prop("controls", true)
              # Setup canvas dimensions and add border
              width = video.width()
              height = video.height()
              canvas
                  .css("border", "solid")
                  .css("border-width", "1px")
                  .attr("width", width)
                  .attr("height", height)
              # In firefox, the width and height are 0! In chrome, they
              # are correct. I tested videoWidth/videoHeight and most other
              # variables. Does not work. 
  </code></pre>