How to detect iOS leaving fullscreen video?

Question

How can I detect when a video on iOS is closed? I am running videojs which launches HTML5 videos as native video players. In order to react properly, I want to get an event when the native player is closed.

There are several similar questions to this one around here, but non of the answers work.

First solution I tried:

player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

Solution was proposed in 2012 here: How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

This method doesn't work for me. The event doesn't get fired (at least in iOS simulator) and I can't do anything with it.

Second solution I tried

// Do on resize
if(video.webkitDisplayingFullscreen == false){
    // Exit was triggered    
}

Solution was proposed even earlier than 2012 here: Is there an "onClose" event for the fullscreen video player on iPhone?

This method also doesn't work, the video element does not have this attribute (at least in iOS simulator). BTW, this method is deprecated.

Does anyone have an idea about how to get notified about iOS leaving fullscreen nowadays?

score 19 · Answer 1 · answered Jan 23 '17 at 15:53

You may well have found your solution by now, but I was having the same issue on iPad and iPhone. I found that none of the fullscreenchange events were firing on these devices, though it worked fine elsewhere.

I found my solution at http://html5wood.com/html5-video-fullscreen-change-events-on-ipad/, but I'll explain here for completeness too:

In addition to the various other event listeners for fullscreenchange, I added

var video = document.getElementById(myVideo);

video.addEventListener("webkitendfullscreen", function(){
    videoExitedFullscreen(video);
}, false);

(Note that the event listener is called on the video itself, not on the document like the other event listeners could be)

Within that, I'm calling another function that tests if the video is currently fullscreen or not, and makes changes accordingly - I created this as a function so I could easily call it from within each of the multiple event listeners needed for various browsers
(if you're not sure what these are see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing)

//function to be run when full screen is closed
function videoExitedFullscreen(videoElement){

    //check if an element is currently full screen
    if(document.fullScreenElement || document.webkitIsFullScreen == true || document.mozFullScreen || document.msFullscreenElement ){

        //do whatever here if the video is now (just became) full screen

    } else {
        console.log('fullscreen was closed');

        //do whatever you want on fullscreen close, like pause or mute
    }
}

As of 01/2019 and iOS12, webkitfullscreenchange will fire when fullscreen mode is entered or exited: fullscreenchange will not. The detection method detailed in the answer is still valid. — BinarySolo, Jan 10 '19 at 19:01
As of 11-Jun-2020 iOS 13.1, webkitfullscreenchange does not fire on the document nor on the video element. The above answer is the only thing that works! I can't believe this answer still works after 4 years and Apple still hasn't fixed it. — Himanshu Patel, Jun 11 '20 at 08:33
I have been trying to do this for almost 3 days now. The full-screen events were working everywhere except iPhone. LIFEEE SAVERRR!!! — Abbas Afzal, Sep 08 '22 at 20:39

score 1 · Answer 2 · answered Sep 01 '15 at 17:07

Listen for the fulscreenchange event and check isFullscreen().

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>

<script>
  videojs('my_video_1').ready(function(){
    var player = this;
    player.on('fullscreenchange', function(){
      if(!player.isFullscreen()) {
        alert('Exited fullscreen');
      }
    });
  });
</script>

Sadly, this applies also to not native players. So there isn't really a distinction. Additionally, the native players probably won't trigger `fullscreentrigger` - but I'll try that tomorrow. — mvmoay, Sep 02 '15 at 17:53

How to detect iOS leaving fullscreen video?

2 Answers2