How To Figure Out When A Html5 Video Player Enters The Full Screen Mode On Ios / Ipads?

The HTML5

Solution 1:

After much faffing around a friend finally pointed me in the right direction.

The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen

var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

With that I can safely capture when the user clicks over the fullscreen button on Safari for the iPads. Interestingly the same events don't seem to work for Safari on the iMac (tested on version 5.1.2).

Thanks Apple for their inconsistency and hours of wasted time.