[ad_1]
En este tutorial, aprenderá cómo hacer que un elemento aparezca en pantalla completa en cualquier navegador usando JavaScript. API de pantalla completa.
«La API de pantalla completa agrega métodos para representar un elemento en particular y sus descendientes en modo de pantalla completa, y para salir del modo de pantalla completa una vez que ya no es necesario» – MDN
El modo de pantalla completa elimina todos los demás elementos de la pantalla (como la barra de navegación del navegador o la base del escritorio) y llena la pantalla disponible con el elemento seleccionado. Un ejemplo común es cuando se comparte una presentación o se ve un video en pantalla completa.
Una ventaja del modo de pantalla completa es que permite al usuario concentrarse únicamente en el elemento que se está viendo sin distraerse con otros elementos en la pantalla. La API FullScreen también usa el comportamiento predeterminado del sistema, por lo que podemos aprovechar algunas funciones integradas sin tener que escribir más código, como presionar Esc Tecla de cierre de pantalla completa.
1. marcado HTML
Para nuestro marcado usaremos un video elemento y un button elemento para nuestro conmutador de pantalla completa.
Dado que estamos usando un botón de pantalla completa personalizado para nuestro elemento de video, necesitaremos desactivar los controles predeterminados del elemento de video (no se preocupe, siempre podemos recuperar los controles una vez que se habilite la pantalla completa). Podemos hacer esto al no incluir controls atributo en nuestro video etiqueta.
Así es como se ve nuestro marcado:
1 | <main>
|
2 | <video id="video" autoplay loop muted> |
3 | <source id='mp4' src="video-src.mp4" type='video/mp4' /> |
4 | </video>
|
5 | |
6 | <button
|
7 | class="full-screen" |
8 | title="Enter fullscreen mode" |
9 | aria-label="Enter fullscreen mode" |
10 | >
|
11 | </button>
|
12 | </main>
|
2. Estilo con CSS
Diseñaremos el botón de pantalla completa para colocarlo en el medio del contenedor de video.
1 | main { |
2 | position: relative; |
3 | height: auto; |
4 | }
|
5 | |
6 | video { |
7 | min-height: 100vh; |
8 | max-width: 100%; |
9 | width: 100%; |
10 | height: auto; |
11 | padding: 0; |
12 | }
|
13 | |
14 | .full-screen { |
15 | transition: 150ms; |
16 | position: absolute; |
17 | top: 0; |
18 | bottom: 0; |
19 | right: 0; |
20 | left: 0; |
21 | margin: auto; |
22 | height: fit-content; |
23 | width: fit-content; |
24 | background-color: rgba(255, 255, 255, 0.5); |
25 | border-color: transparent; |
26 | border-radius: 50%; |
27 | padding: 16px; |
28 | display: flex; |
29 | justify-content: center; |
30 | align-items: center; |
31 | outline: none; |
32 | cursor: pointer; |
33 | }
|
34 | |
35 | .full-screen:hover { |
36 | background-color: rgba(255, 255, 255, 1); |
37 | }
|
También podemos usar la consulta de medios CSS hover para determinar cómo debe comportarse el botón en dispositivos de apuntar y hacer clic (p. ej., portátiles) frente a dispositivos táctiles (p. ej., teléfonos móviles). En esta demostración, configuraremos el botón para que siempre esté visible en los dispositivos táctiles y solo visible al pasar el mouse sobre los dispositivos con cursor.
1 | @media (hover: hover) { |
2 | .full-screen { |
3 | opacity: 0; |
4 | }
|
5 | |
6 | main:hover .full-screen { |
7 | opacity: 1; |
8 | }
|
9 | }
|
3. Funcionalidad de pantalla completa
Una vez que tenemos el diseño y el estilo listos, podemos comenzar con la funcionalidad usando JavaScript.
Almacenaremos los elementos que serán seleccionados como variables globales.
1 | const video = document.getElementById("video"); |
2 | const fullscreenButton = document.querySelector(".full-screen"); |
Con la ayuda de detector de eventos, realizaremos un seguimiento cuando se haga clic en el botón de pantalla completa y llamaremos a la API de pantalla completa. Esto se puede hacer con la ayuda de .requestFullScreen() directamente sobre el elemento a realizar a pantalla completa.
1 | fullscreenButton.addEventListener("click", function () {
|
2 | video.requestFullscreen(); |
3 | }); |
Soporte de pantalla completa de iOS
Para dispositivos iOS, requerimos un método diferente, por lo que necesitaremos actualizar nuestra función para tener esto en cuenta.
1 | fullscreenButton.addEventListener("click", function () { |
2 | if (video.webkitSupportsFullscreen) { |
3 | video.webkitEnterFullscreen(); |
4 | return; |
5 | }
|
6 | |
7 | video.requestFullscreen(); |
8 | });
|
Dado que ya no tendremos acceso al botón de alternar cuando el video esté en modo de pantalla completa, necesitaremos otro método para asegurarnos de que el usuario pueda salir de la vista de pantalla completa. Afortunadamente, los controles de video HTML5 estándar incluyen un cambio de pantalla completa, por lo que podemos usar esto a nuestro favor al mostrar los controles de video después de que el modo de pantalla completa esté activo. Veremos cómo hacer esto en la siguiente sección.
Oyente de eventos a pantalla completa
Hay un detector de eventos específico para detectar cuándo el navegador entra o sale del modo de pantalla completa. Podemos detectar el cambio de modo de pantalla completa con fullscreenchange detector de eventos y también detecta si el navegador está actualmente en modo de pantalla completa con fullscreenElement Propiedad. La propiedad devuelve el elemento exacto en una vista de pantalla completa o devuelve null si no se encuentra ningún elemento.
Con estas dos propiedades, podemos realizar cambios en nuestros elementos en función de si están en modo de pantalla completa o no.
En esta demostración, agregaremos los controles predeterminados al video una vez que esté en modo de pantalla completa y los eliminaremos cuando ya no esté en modo de pantalla completa usando setAttribute y removeAttribute métodos.
1 | document.addEventListener("fullscreenchange", function () { |
2 | if (document.fullscreenElement) { |
3 | video.setAttribute("controls", true); |
4 | return; |
5 | }
|
6 | |
7 | video.removeAttribute("controls"); |
8 | });
|
Formatear elementos en pantalla completa
También hay selectores de CSS para diseñar elementos cuando está en modo de pantalla completa. El :fullscreen El selector se puede usar para diseñar elementos cuando el modo de pantalla completa está activo y ::backdrop el pseudo-selector se puede usar para diseñar el fondo del modo de pantalla completa.
El navegador utiliza estos selectores para aplicar un estilo predeterminado al modo de pantalla completa.
5. Uso de FullScreenAPI en elementos que no son de video
Al comienzo de este tutorial, mencioné que la API de pantalla completa solo es totalmente compatible con elementos de video para dispositivos iOS. Ahora veremos un método incompatible entre navegadores para usar la API de pantalla completa en otros elementos.
En esta demostración, llamaremos a la API de pantalla completa en un carrusel que creamos previamente en otro tutorial.
Aquí está la nueva demostración (una versión más grande de CodePen). Tenga en cuenta que esta implementación no funcionará en un iPhone.
Usaremos el diseño del tutorial de carrusel y agregaremos un botón de pantalla completa. También usaremos íconos SVG para alternar la visualización de los botones dependiendo de si el modo de pantalla completa está activo o no.
Así es como se ve nuestro marcado:
1 | <section class="slider-wrapper" id="wrapper"> |
2 | |
3 | <button class="full-screen" title="Enter full screen mode"> |
4 | <svg class="full-screen--open"></svg> |
5 | |
6 | <svg class="full-screen--close"></svg> |
7 | </button>
|
8 | |
9 | <ul class="slides-container" id="slides-container"> |
10 | </ul>
|
11 | </section>
|
Una diferencia con esta implementación es que el botón de pantalla completa es un descendiente del elemento que vamos a poner en pantalla completa, por lo que aún podremos acceder a él en modo de pantalla completa. Por lo tanto, podemos usar el mismo botón para salir del modo de pantalla completa.
Obtener artículos
Primero obtendremos los elementos a los que apuntamos con JavaScript:
1 | const wrapper = document.getElementById("wrapper");
|
2 | const fullscreenButton = document.querySelector(".full-screen");
|
Como estamos usando un botón de alternar, no necesitamos detectar el evento de cambio de pantalla completa, ya que podemos verificar ambos casos en nuestro detector de eventos de clic.
1 | fullscreenButton.addEventListener("click", function () { |
2 | if (document.fullscreenElement) { |
3 | document.exitFullscreen() |
4 | } else { |
5 | if (wrapper.webkitSupportsFullscreen) { |
6 | wrapper.webkitEnterFullscreen() |
7 | } else { |
8 | wrapper.requestFullscreen() |
9 | }
|
10 | }
|
11 | });
|
Alternar visualización de iconos
El requestFullScreen() y exitFullScreen() métodos de devolución promesas por lo que es posible vincular otra función para que se ejecute después de que los métodos se ejecuten usando el .then() método.
Podemos usar este método para alternar la visualización del ícono en el botón de pantalla completa agregando y eliminando una clase is-active.
Así es como se ve nuestra función actualizada:
1 | fullscreenButton.addEventListener("click", () => { |
2 | if (document.fullscreenElement) { |
3 | document
|
4 | .exitFullscreen() |
5 | .then(() => fullscreenButton.classList.remove("is-active")); |
6 | } else { |
7 | if (wrapper.webkitSupportsFullscreen) { |
8 | wrapper
|
9 | .webkitEnterFullscreen() |
10 | .then(() => fullscreenButton.classList.add("is-active")); |
11 | } else { |
12 | wrapper
|
13 | .requestFullscreen() |
14 | .then(() => fullscreenButton.classList.add("is-active")); |
15 | }
|
16 | }
|
17 | });
|
Luego podemos actualizar nuestro CSS para mostrar el ícono que queremos según el nombre de la clase:
1 | .full-screen:not(.is-active) .full-screen--close { |
2 | display: none; |
3 | }
|
4 | |
5 | .full-screen.is-active .full-screen--open { |
6 | display: none; |
7 | }
|
También es posible lograr el mismo efecto usando :fullscreen selector sin tener que cambiar los nombres de clase con JavaScript.
Usando :fullscreen selector, nuestro CSS se ve así:
1 | .full-screen--close { |
2 | display: none |
3 | }
|
4 | |
5 | :fullscreen .full-screen--open { |
6 | display: none; |
7 | }
|
8 | |
9 | :fullscreen .full-screen--close { |
10 | display: block; |
11 | }
|
Conclusión
¡Y eso es todo amigos! En este tutorial, aprendió a implementar la API de JavaScript de pantalla completa, incluidos varios casos de uso y advertencias.
[ad_2]
Créditos: Jemima Abu (Envato Tuts+ Web Design)
¡¡Si te ha gustado el post compártelo en tus redes sociales para que llegue a más gente!!
