Meta

• Tengo una configuración de video que se reproduce en pantalla completa cuando se toca un enlace en la página en un dispositivo móvil. Esto funciona bien.
• Oculté los controles de video HTML5 a través de CSS: quiero que el video esté completamente limpio sin ningún control.
• Quiero poder cerrar el video de pantalla completa tocando nuevamente el video de pantalla completa.
• También necesito poder agregar una clase al cuerpo y pausar el video al cerrar. La razón para agregar la clase es que quiero mostrar y ocultar el video en sí, por lo que agregar la clase me permite controlar el css de toda la página como un cambio de estado.

Problema

Cuando esc , por ejemplo, o Atrás en un móvil Android, obviamente no ejecutará la función.

¿Cómo puedo detectar cuándo se ha salido de la pantalla completa para ejecutar las funciones que quiero?

Código

 videoSmallTrigger.on('click', function() { // Activate if (!document.isFullScreen && !document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) { console.log('trigger open'); launchFullscreen(videoSmallID); body.addClass('fullscreen-video-sm'); videoSmall.get(0).play(); } // Deactivate else { console.log('trigger close'); exitFullscreen(); body.removeClass('fullscreen-video-sm'); videoSmall.get(0).pause(); } }); function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }