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

Question

I'm dynamically inserting an html5 video tag with unknown dimensions onto a page. I'm getting the dimensions with the loadedmetadata event which works like a charm on all browsers.

However, from what I understand this event won't fire until the user touches the video on the ipad. This makes it really difficult to get the actual dimensions of the video which I need in order to size it's container.

Is there

1. Another way to get dimensions of a video which would work in this scenario? or
2. A way to trigger the loadedmetaevent?

Thanks!

CODE:

 var src=fullPathToVideoWithoutExtension;

 // DETECT WHICH FILE FORMAT TO 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 THE 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 a fiddle: http://jsfiddle.net/Fv4XG/1/

Notice that in the browser it will immediately alert the video dimensions, but on the ipad you have to wait until there is user interaction before it pulls the dimensions. How can I get the dimensions when the video is inserted into the DOM like in all other browsers?

Answer 1

I don't believe there is a way to get the loadedmetadata event (which you need in order to read the dimensions of the dynamically loaded video) to fire on iOS without user interaction. For reasons explained in a fairly detailed answer here, Apple disabled autoplay from iOS version 6.01. I'll include the quote from the Apple documentation here.

"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.

I think the only solution available to you, therefore, is to hide the video initially and display a button which prompts the video to load when clicked. This will cause the loadedmetadata event to fire, at which point you can set the size of your container based on the video dimensions, start playing the video, and finally reveal it.

I did the following in plain old JavaScript for ease. It hopefully demonstrates both the issue and the workaround I'm suggesting (jsfiddle here):

    var video = document.getElementById('video');
    video.load(); // In desktop browser this will cause loadedmetadata event to fire

    // Hide the video initially
    video.style.visibility = 'hidden';

    document.getElementById('button').addEventListener('click', function() {
        video.load(); // on iOS we need user interaction to prompt load
    });

    video.addEventListener('loadedmetadata', function() {

        // console log is much less intrusive than window.alert
        // you can see the log statements in Safari developer tools if you plug in a device
        window.alert(this.videoWidth);
        window.alert(this.videoHeight);

        // Now we can set container size, reveal and play
        video.width = this.videoWidth;
        video.height = this.videoHeight;

        video.play();
        video.style.visibility = 'visible';
    }); 

I've found this page from the W3 to be useful in the past for playing around with the HTML5 video API.