Revision history [back]

You can detect the fullscreen button click event of an HTML5 video using the Fullscreen API.

First, you need to check if the Fullscreen API is supported by the browser using the following code:

if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
  // Fullscreen API is supported
}

Once you have confirmed that the Fullscreen API is supported, you can add an event listener to the video element for the fullscreenchange event. This event is fired when the fullscreen state of the video changes, either entering or exiting fullscreen mode.

var video = document.getElementById('myVideo');
if (video.requestFullscreen) {
  video.addEventListener('fullscreenchange', fullscreenHandler);
} else if (video.webkitRequestFullscreen) {
  video.addEventListener('webkitfullscreenchange', fullscreenHandler);
} else if (video.mozRequestFullScreen) {
  video.addEventListener('mozfullscreenchange', fullscreenHandler);
} else if (video.msRequestFullscreen){
  video.addEventListener('MSFullscreenChange', fullscreenHandler);
}

function fullscreenHandler() {
  if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
    // Video is now in fullscreen mode
    console.log('Fullscreen button clicked!');
  } else {
    // Video is not in fullscreen mode
  }
}

In the fullscreenHandler function, you can check whether the video element is in fullscreen mode or not. If it is, then the fullscreen button has been clicked and you can execute your desired code.