La pantalla completa JavaScript en HTML es una funcionalidad proporcionada por el API Fullscreen, la cual nos permite mostrar un elemento del DOM y sus descendientes a pantalla completa. Esto implica ocultar todos los elementos del navegador, como los menús y las pestañas, para enfocar la atención del usuario en el contenido visualizado, ya sea un video, una imagen u otro tipo de elemento.
Métodos del API Fullscreen
El API Fullscreen proporciona dos métodos principales para manejar la visualización a pantalla completa:
- Element.requestFullscreen(): Este método solicita al agente de usuario (generalmente el navegador) que muestre un elemento a pantalla completa. Devuelve una promesa que se resuelve una vez que se activa el modo de pantalla completa.
- Document.exitFullscreen(): Este método solicita al agente de usuario que salga del modo de pantalla completa y vuelva a la visualización normal. También devuelve una promesa que se resuelve una vez que se desactiva el modo de pantalla completa.
Para utilizar estos métodos, es importante comprobar si el navegador es compatible con la funcionalidad de pantalla completa. A continuación, se muestra un ejemplo de cómo verificar la compatibilidad y solicitar la pantalla completa:
function requestFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }}var videoElement = document.getElementById( my-video );requestFullscreen(videoElement);En el ejemplo anterior, se define una funciónrequestFullscreenque verifica qué método de solicitud de pantalla completa es compatible y lo invoca en consecuencia. Luego, se utiliza el métodogetElementByIdpara obtener el elemento de video con el ID my-video y se solicita la pantalla completa para ese elemento.
Salir de la pantalla completa
Para salir del modo de pantalla completa, se puede utilizar el métodoexitFullscreen. Al igual que con la solicitud de pantalla completa, es necesario verificar la compatibilidad del navegador antes de invocar este método. Aquí hay un ejemplo:
function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }}exitFullscreen();En este caso, se define una funciónexitFullscreenque verifica qué método de salida de pantalla completa es compatible y lo invoca en consecuencia. Luego, simplemente se llama a esta función para salir del modo de pantalla completa.
Propiedades del API Fullscreen
Además de los métodos, el API Fullscreen también proporciona dos propiedades útiles:
Cómo hacer pantalla completa en apple tv- DocumentOrShadowRoot.fullscreenElement: Esta propiedad indica qué elemento del DOM o del shadow dom se está mostrando en pantalla completa. Puede ser útil para realizar acciones específicas mientras se está en modo de pantalla completa.
- Document.fullscreenEnabled: Esta propiedad indica si se puede activar el modo de pantalla completa. Devuelve
truesi el modo de pantalla completa está disponible yfalsesi no lo está.
Estas propiedades se pueden utilizar para verificar si el agente de usuario está en modo de pantalla completa y qué elemento se está mostrando en pantalla completa. Aquí hay un ejemplo:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;console.log('Modo de pantalla completa habilitado: ' + fullscreenEnabled);console.log('Elemento en pantalla completa: ' + fullscreenElement);En el ejemplo anterior, se utilizan las propiedades y los hacks de compatibilidad de los diferentes navegadores para obtener información sobre el modo de pantalla completa.
Eventos del API Fullscreen
El API Fullscreen también proporciona eventos que se pueden utilizar para detectar cambios en el estado de pantalla completa y manejar posibles errores. Los eventos disponibles son:
- Document.onfullscreenchange: Se dispara cuando se produce un cambio en el estado de pantalla completa en todo el documento.
- Document.onfullscreenerror: Se dispara si ocurre un error al intentar activar o desactivar el modo de pantalla completa en todo el documento.
- Element.onfullscreenchange: Se dispara cuando se produce un cambio en el estado de pantalla completa en un elemento específico.
- Element.onfullscreenerror: Se dispara si ocurre un error al intentar activar o desactivar el modo de pantalla completa en un elemento específico.
Estos eventos se pueden utilizar para realizar acciones específicas cuando se producen cambios en el modo de pantalla completa. Aquí hay un ejemplo:
document.addEventListener( fullscreenchange, handleFullscreenChange);document.addEventListener( webkitfullscreenchange, handleFullscreenChange);document.addEventListener( mozfullscreenchange, handleFullscreenChange);document.addEventListener( msfullscreenchange, handleFullscreenChange);function handleFullscreenChange(event) { console.log( cambio en el modo de pantalla completa: + Date.now());}En este caso, se registran los eventos de cambio de pantalla completa en el documento y se llama a la funciónhandleFullscreenChangecada vez que se produce un cambio. Esta función simplemente muestra un mensaje en la consola con la marca de tiempo actual.
El API Fullscreen en HTML proporciona una forma sencilla de mostrar elementos a pantalla completa en un navegador web. Con los métodos, propiedades y eventos disponibles, es posible controlar y personalizar la experiencia de pantalla completa para mejorar la visualización de contenido multimedia y optimizar la interacción con el usuario.
La importancia de la pantalla completa en htmlConsultas habituales
¿Qué es el API Fullscreen en HTML5?
El API Fullscreen en HTML5 es una funcionalidad que permite mostrar un elemento del DOM y sus descendientes a pantalla completa, ocultando los elementos del navegador para enfocar la atención del usuario en el contenido visualizado.
¿Cuáles son los métodos principales del API Fullscreen?
Los métodos principales del API Fullscreen sonElement.requestFullscreen()yDocument.exitFullscreen(). El primero se utiliza para solicitar la pantalla completa de un elemento específico, mientras que el segundo se utiliza para salir del modo de pantalla completa.
Para verificar la compatibilidad del navegador con el API Fullscreen, puedes comprobar la existencia de los métodosrequestFullscreenyexitFullscreenen el elemento o documento que deseas mostrar a pantalla completa.
¿Qué propiedades proporciona el API Fullscreen?
El API Fullscreen proporciona las propiedadesDocumentOrShadowRoot.fullscreenElementyDocument.fullscreenEnabled. La primera indica qué elemento se está mostrando en pantalla completa, mientras que la segunda indica si el modo de pantalla completa está habilitado.
¿Qué eventos se pueden utilizar con el API Fullscreen?
Los eventos disponibles con el API Fullscreen sonDocument.onfullscreenchange,Document.onfullscreenerror,Element.onfullscreenchangeyElement.onfullscreenerror. Estos eventos se utilizan para detectar cambios en el estado de pantalla completa y manejar posibles errores.
Cómo poner pantalla completa en pc con htmlAmplía tu conocimiento sobre Pantalla completa javascript en html: api fullscreen y ejemplos analizando otros increíbles artículos disponibles en la categoría Pantalla completa.