jquery - How to get dimensions of dynamically inserted video on ipad? JavaScript -

i'm dynamically inserting html5 video tag unknown dimensions onto page. i'm getting dimensions loadedmetadata event works charm on browsers.

however, understand event won't fire until user touches video on ipad. makes difficult actual dimensions of video need in order size it's container.

is there

1. another way dimensions of video work in scenario? or
2. a way trigger loadedmetaevent?

thanks!

code:

 var src=fullpathtovideowithoutextension;   // detect file format use  if($.support.browser.h264||$.support.mpeg4){      var supportedsrc=supportedsrc+'<source src="'+src+'.mp4" type="video/mp4">';   };    if($.support.browser.ogg){      var supportedsrc=supportedsrc+'<source src="'+src+'.ogv" type="video/ogg">';   };    // setup video element   var $video=$('<video id="box_video" controls>'+supportedsrc+'</video>');    $video[0].src=src+'.mp4';   $video[0].addeventlistener('loadedmetadata',function(){      var width=this.videowidth;          height=this.videoheight;       },false) 

here's fiddle: http://jsfiddle.net/fv4xg/1/

notice in browser alert video dimensions, on ipad have wait until there user interaction before pulls dimensions. how can dimensions when video inserted dom in other browsers?

i don't believe there way loadedmetadata event (which need in order read dimensions of dynamically loaded video) fire on ios without user interaction. reasons explained in detailed answer here, apple disabled autoplay ios version 6.01. i'll include quote apple documentation here.

"apple has made decision disable automatic playing of video on ios devices, through both script , attribute implementations.

in safari, on ios (for devices, including ipad), user may on cellular network , charged per data unit, preload , auto-play disabled. no data loaded until user initiates it." - apple documentation.

i think solution available you, therefore, hide video , display button prompts video load when clicked. cause loadedmetadata event fire, @ point can set size of container based on video dimensions, start playing video, , reveal it.

i did following in plain old javascript ease. demonstrates both issue , workaround i'm suggesting (jsfiddle here):

    var video = document.getelementbyid('video');     video.load(); // in desktop browser cause loadedmetadata event fire      // hide video     video.style.visibility = 'hidden';      document.getelementbyid('button').addeventlistener('click', function() {         video.load(); // on ios need user interaction prompt load     });      video.addeventlistener('loadedmetadata', function() {          // console log less intrusive window.alert         // can see log statements in safari developer tools if plug in device         window.alert(this.videowidth);         window.alert(this.videoheight);          // can set container size, reveal , play         video.width = this.videowidth;         video.height = this.videoheight;          video.play();         video.style.visibility = 'visible';     });  

i've found this page w3 useful in past playing around html5 video api.