The HTML5 tag offers the user a button to toggle on and off the fullscreen mode on Safari for mobile devices (iOS).
I would like to capture and handle this user action but it doesn't seem to raise an event when the button is pressed and the player enters the full screen mode.
Here is the link to the Safari API for the HTMLVideoElement class:
http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356
We can easily find out when the video is paused of played in Javascript, like this:
function onload()
{
var player = document.getElementsByTagName("video")[0];
player.addEventListener('play',videoPlayHandler,false);
player.addEventListener('pause',videoPauseHandler,false);
}
However they don't seem to have any events for when the video enters the full screen mode.
We can force the video into fullscreen mode in response to user action by calling the webkitEnterFullscreen(), but that doesn't help me. I need to know when the user taps on the fullscreen button.
Hiding the controls and replacing them by my own custom controls sounds like a really long winded solution.
Another option I can think of is to set a timing event, constantly checking for the webkitDisplayingFullscreen property, but that feels like a bad thing to do in terms of memory management.
Can anyone suggest a better solution?