La copia del código es la siguiente:
// juzga varios navegadores y encuentre el método correcto
function LaunchfullScreen (elemento) {
if (element.RequestFullScreen) {
elemento.RequestFullScreen ();
} else if (element.mozRequestFullScreen) {
elemento.mozRequestFullScreen ();
} else if (element.webkitRequestFullScreen) {
elemento.webkitRequestFullScreen ();
} else if (element.msRequestFullScreen) {
element.msRequestFullScreen ();
}
}
// ¡Inicie la pantalla completa!
LaunchFullScreen (document.documentelement);
LaunchFullScreen (document.getElementById ("VideoElement"));
Llame al método de pantalla completa en los elementos de página que desea mostrar en la pantalla completa, y la ventana del navegador se convertirá en pantalla completa, pero el usuario primero solicitará al usuario que permita el modo de pantalla completa. Tenga en cuenta que es probable que los usuarios rechacen el modo de pantalla completa. Si el usuario ejecuta el modo de pantalla completa, la barra de herramientas del navegador y otros menús de botones estarán ocultos y su página cubrirá toda la pantalla.
Salir al modo de pantalla completa
Este método ExitfullScreen (que también requiere un prefijo del navegador) hará que el navegador salga del modo de pantalla completa y se convierta en el modo normal.
La copia del código es la siguiente:
// Determinar el tipo de navegador
función ExitfullScreen () {
if (document.exitfullScreen) {
document.exitfullScreen ();
} else if (document.mozcancelfullscreen) {
document.mozCancEffullScreen ();
} else if (document.webkitExitfullScreen) {
document.webkitExitfullScreen ();
}
}
// ¡Salga del modo de pantalla completa!
exitfullScreen ();
Cabe señalar que el objeto de documento solo puede llamar a ExitfullScreen, en lugar del objeto que se pasa cuando se inicia la pantalla completa.
Propiedades y eventos de pantalla completa
Desafortunadamente, las propiedades de pantalla completa y los métodos relacionados para eventos también requieren el prefijo del navegador, pero creo que esto no será necesario pronto.
1.Document.fullScreenElement: elemento de página web de pantalla completa.
2.Document.fullScreenEnabled: determina si está actualmente en pantalla completa.
El evento FullScreenchange se activará cuando se inicie o salga la pantalla completa:
La copia del código es la siguiente:
var fullScreenElement = document.fullScreenElement ||
var fullScreenEnabled = document.fulLScreenEnabled ||
Todavía puede prefijo este evento utilizando el método anterior para juzgar el tipo de navegador.
CSS de estilo de pantalla completa
Varios navegadores proporcionan una regla de estilo CSS muy útil en modo de pantalla completa:
Copie el código de la siguiente manera ::-WebKit-Full-Screen {
/* propiedades */
}
: -Moz-Full-Screen {
/* propiedades */
}
: -ms-fullscreen {
/* propiedades */
}
: pantalla completa { / *prepec * /
/* propiedades */
}
: Fullscreen { / * spec * /
/* propiedades */
}
/ * elementos más profundos */
: -webkit-full-screen video {
Ancho: 100%;
Altura: 100%;
}
/* Styling el telón de fondo*/
:: telón de fondo {
/* propiedades */
}
::-ms-backdrop {
/* propiedades */
}
En algunos casos, hay algunos problemas con los estilos de WebKit, y será mejor que mantenga estos estilos simples.
Estas API de pantalla completa son súper simples y súper útiles. La primera vez que vi esta API en la demostración de BananabRead de MDN, fue un juego de tiro que resultó ser una pantalla completa, que usó el evento escuchando detectar el estado de pantalla completa. Recuerde estas API útiles, puede recogerlas cuando las necesite.