Question

The HTML5 <video> 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:

https://developer.apple.com/documentation/webkitjs/htmlvideoelement

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?

Answer 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.