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

4
votes

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?

2
htmleventsvideo
I am trying the same thing to exit from the full screen but to no success on iphone. I am using video js player. Please guide me further – Hussnain Cheema

2 Answers

8
votes

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

1
votes
$('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);    
});