Solicitud de API de pantalla completaFullscreen()
❮ API de pantalla completaEjemplo
Mostrar un elemento <video> en modo de pantalla completa:
/* Get the element you want displayed in fullscreen mode (a video in this
example): */
var elem = document.getElementById("myvideo");
/* When
the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't
support the requestFullscreen property yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El método requestFullscreen() abre un elemento en modo de pantalla completa.
Sugerencia: utilice el método exitFullscreen() para cancelar el modo de pantalla completa.
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método. Nota: Algunos navegadores requieren un prefijo específico (ver paréntesis):
| Method | |||||
|---|---|---|---|---|---|
| requestFullscreen() | 71.0 15.0 (webkit) |
79.0 11.0 (ms) |
64.0 9.0 (moz) |
6.0 (webkit) | 58.0 15.0 (webkit) |
Sintaxis
HTMLElementObject.requestFullscreen()
Parámetros
| Ninguna |
Detalles técnicos
| Valor devuelto: | Sin valor de retorno |
|---|
Más ejemplos
Para abrir la página HTML en pantalla completa, use document.documentElementen lugar de . En este ejemplo, también usamos una función de cierre para cerrar la pantalla completa:document.getElementById("element")
Ejemplo
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
También puedes usar CSS para diseñar la página cuando está en modo de pantalla completa:
Ejemplo
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 syntax */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
❮ API de pantalla completa