Méthode requestFullscreen() de l'API Fullscreen

Définition et utilisation

requestFullscreen() Méthode d'ouverture de l'élément en mode plein écran.

Avis :Veuillez utiliser Méthode exitFullscreen()Annuler le mode plein écran.

Exemple

Exemple 1

Afficher l'élément <video> en mode plein écran :

/* Obtenir l'élément à afficher en mode plein écran (dans cet exemple, le vidéo) :*/
var elem = document.getElementById("myvideo");
/* Lors de l'exécution de la fonction openFullscreen() , ouvrir le vidéo en mode plein écran.
Veuillez noter que nous devons inclure les préfixes des différents navigateurs, car ils ne supportent pas encore l'attribut requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Essayez-le vous-même

Exemple 2

Pour ouvrir une page HTML en mode plein écran, utilisez document.documentElement au lieu de document.getElementById("element").Dans cet exemple, nous avons également utilisé une fonction de fermeture pour fermer le mode plein écran :

/* Obtenir documentElement (<html>) pour afficher la page en plein écran */
var elem = document.documentElement;
/* Visualiser en plein écran */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Fermer le plein écran */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Essayez-le vous-même

Exemple 3

Lorsque la page est en mode plein écran, vous pouvez également utiliser des styles CSS pour la page :

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* Syntaxe IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Syntaxe standard */
:fullscreen {
  background-color: yellow;
}

Essayez-le vous-même

Syntaxe

HTMLElementObject.requestFullscreen()

Paramètres

Pas de détails.

Détails techniques

Valeur de retour : Pas de valeur de retour.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du premier navigateur prenant en charge cette méthode.

Remarque :Certains navigateurs nécessitent des préfixes spécifiques (voir les parenthèses) :

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)