HTML5 Video loadeddata event does not work in IOS Safari

Question

I am trying to trigger an event once a video has loaded the first frame. The code I have used works in desktop browsers that I have tested in but it does not work in mobile safari on IOS. Is there something about the code that is not supported on mobile safari or is there another solution to achieve what I want?

function loadvideo (vidsource){

var vid = document.createElement('video');
vid.src = vidsource;

alert("Video about to load"); //This works fine in mobile safari
vid.addEventListener('loadeddata', function() {
alert("Video Loaded!"); //This does not display in mobile safari
//Will do something else here
}, false);

}

Answer 1

On iOS, it looks like the video doesn't get loaded unless the user hits play, or if the autoplay attribute has been added (which doesn't actually appear to autoplay it).

The following should work for you:

var vid = document.createElement('video');
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
    vid.autoplay = true;
vid.addEventListener('loadeddata', function() {[...]}, false);
vid.src = videosource;

Alternatively, you can listen to the progress event instead of loadeddata, which seems to work fine on iOS Safari.