5

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?

Timo Ernst
  • 15,243
  • 23
  • 104
  • 165
  • 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 Aug 05 '15 at 16:56

2 Answers2

9

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

Community
  • 1
  • 1
potench
  • 3,802
  • 1
  • 28
  • 39
  • 4
    For those who are working on this under iOS, this will not work... the resize event will not fire when going fullscreen / exiting fullscreen. – jpincheira Sep 21 '12 at 09:45
1
$('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);    
});
Lucas Pedroza
  • 65
  • 1
  • 2
  • Welcome to Stack Overflow. Please explain your code. – A.L May 15 '14 at 01:48
  • This code is actually really helpful as you can only detect the fullscreenchange event as the fullscreenchange event fires on open you need to detect the current state. Lucas is using the fullscreen to return whether it is in full screen or not. This little snippet is extremely helpful. However "NOTE" that in ios these events don't exist. – Zanderi May 20 '14 at 17:16