Is there an "onClose" event for the fullscreen video player on iPhone? - html

Question

I am using an html5 video player on a website.
When the user starts playing it, the player goes into fullscreen mode and plays the video.
When the video has ended, I catch the ended event and close the video player via myvideo.webkitExitFullScreen();.
Now, I need another event when the player actually gets closed either if the user taps the "done" button in top bar or if the player gets closed via video.webkitExitFullScreen();.
Is there a way to do this?

Answer 1

Updated Answer
You can use the webkitendfullscreen and webkitenterfullscreen events:
var vid = document.getElementById("some-vid");
vid.addEventListener('webkitendfullscreen', function (e) {
// handle end full screen
});
vid.addEventListener('webkitenterfullscreen', function (e) {
// handle enter full screen
});
Previous Answer
A similar question was asked here: How do I capture keyboard events while watching an HTML5 video in fullscreen mode? - not sure how to link these 2 questions.
I'm just going to assume you use jQuery for ease of writing this code. You just need to know when the video has changed modes from full-screen to not-full-screen... so on Resize you can check the video.webkitDisplayingFullscreen; property.
var isVideoFullscreen = video.webkitDisplayingFullscreen;
$(window).bind("resize", function (e) {
// check to see if your browser has exited fullscreen
if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
isVideoFullscreen = video.webkitDisplayingFullscreen;
if (isVideoFullscreen) {
// you have just ENTERED full screen video
} else {
// you have just EXITED full screen video
}
}
});
Hope this helps or points you in the right direction

Answer 2

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff';
// Now do something interesting
alert('Event: ' + event);
});