Demande d'API plein écranFullscreen()
❮ API plein écranExemple
Afficher un élément <video> en mode plein écran :
/* 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();
}
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La méthode requestFullscreen() ouvre un élément en mode plein écran.
Astuce : Utilisez la méthode exitFullscreen() pour annuler le mode plein écran.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode. Remarque : Certains navigateurs nécessitent un préfixe spécifique (voir parenthèses) :
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) |
Syntaxe
HTMLElementObject.requestFullscreen()
Paramètres
Rien |
Détails techniques
Valeur de retour : | Aucune valeur de retour |
---|
Plus d'exemples
Pour ouvrir la page HTML en plein écran, utilisez le document.documentElement
au lieu de . Dans cet exemple, nous utilisons également une fonction de fermeture pour fermer le plein écran :document.getElementById("element")
Exemple
/* 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();
}
}
Vous pouvez également utiliser CSS pour styliser la page lorsqu'elle est en mode plein écran :
Exemple
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 syntax */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
❮ API plein écran