How to detect iOS leaving fullscreen video? - ios

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?

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>