Javascript onloadedmetadata event not firing on iOS devices

Question

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 & width of the DOM.

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 onloadedmetadata event never gets fired.

Here is a small code sample which reproduces the problem:

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);


<video id="viddy" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

http://jsfiddle.net/AUSNu/213/

I've even tried coding up a solution using jQuery, on the off-chance that the event may fire, but it still doesn't.

$('#viddy').on('loadedmetadata', function() {
   alert('test');
});

I even went as far as enabling remote debugging through safari on my ipad, but still no output within the console.

Are there any workarounds to this? I couldn't find much info about this on the web / in documentation.

Answer 1

Unfortunately, there isn't really a way around this. Mobile Safari will not download any part of the video file until it gets a user interaction (i.e. some kind of touch event), not even the header, which is required to know the dimensions.

In your specific example, you need to enable controls on the video so the user can start it playing. (Or you can write your own code that starts it, but it has to be triggered by a touch or click event.) Once it starts playing, the loadedmetadata even will fire, and you can do what you want.

I recommend reading this other answer where someone else was trying to do pretty much the same thing. It discusses the problem in more detail along with a working link. Also, it addresses another problem with scaling the video that you will probably run into.

Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width