Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

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?

like image 769
aeldron Avatar asked Feb 01 '12 11:02

aeldron


People also ask

How do I watch a video full screen on my iPad?

Viewing a Video in Full-Screen Mode on an iPad To make the YouTube app play in full-screen mode, choose and open a video. When the video starts playing, tap on it once. You'll see several additional options, including dual arrows at the bottom right corner. Tap the arrows to go to full screen.

How do you make a video full screen on iOS?

Tap the video you'd like to watch. At the bottom of the video player, tap full screen .


1 Answers

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.

like image 141
aeldron Avatar answered Sep 21 '22 12:09

aeldron