How to Figure Out When a HTML5 Video Player Enters The Full Screen Mode on iOS/Ipads

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

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.

Web App - iPad webkitEnterFullscreen - Programatically going full-screen video

The best I have been able to come up with it this.

Setup your video tag and use CSS to position it off the screen someplace (it can't be set to display:none). I used absolute positioning to move it off the top left of the screen.

Then use this JS:

$('.popup.ipad a').click(function() {

        var currentID = $(this).closest('.player').find('video').attr('id');
        var videoContainer = document.getElementById(currentID);
        var newSrc = $(this).attr('href');

        videoContainer.src = newSrc;
        videoContainer.webkitEnterFullscreen();
        videoContainer.play();
});

It will play in Fullscreen great, but when the user clicks "done" to exit the video will continue to play off the screen (so you will hear the audio).

So, I need to figure out how to listen for an event that is fired when "Done" is touched (I'm not even sure there is an event for this). Or, use the method described here and run it every second to see if Fullscreen mode is being used. But I haven't had much success, no matter what what I do I get errors.

Hopefully this helps you find some answers. If so, let me know!

How does the browser determine whether a full screen button is shown or not for HTML5 video tags?

That is because the video in your second example is inside an iframe, which is quite restrictive as to how you can manipulate the content inside of it.

I imagine adding the allowfullscreen attribute to an iframe would show a different result r.e. video controls.

turn off special video mode for Safari iOS

I have now found the answer here: https://webkit.org/blog/6784/new-video-policies-for-ios/

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.

---

Related Topics