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

Answer 1

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
    }
}

Answer 2

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>