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