Utiliser le mode plein écran

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'API plein écran fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. Cet article fournit des informations sur l'utilisation de l'API.

Note: Cette API est toujours en cours de standardisation. Bien que Gecko et Google Chrome aient tous les deux des implémentations, elles ne sont pas compatibles entre elles pour l'instant et aucune des deux n'implémente la spécification dans son état actuel. Pour cette raison, au moins dans Firefox, elle n'est pas activée par défaut dans Firefox 9 mais l'est dans Firefox 10. Comme la spécification est loin d'être standardisée, ce document est préliminaire et peut contenir des informations incorrectes. Une fois que la spécification sera stabilisée, la documentation sera nettoyée afin d'être plus indépendante du navigateur utilisé.

L'API permet de demander facilement au navigateur de faire en sorte qu'un élément et ses enfants occupent tout l'écran, éliminant ainsi toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.

Activer le mode plein écran

En partant d'un élément que vous aimeriez afficher en plein écran (<video>, par exemple), vous pouvez le passer en plein écran simplement en appelant sa méthode requestFullscreen() ; cette méthode est implémentée dans Gecko en tant que element.mozRequestFullScreen() et dans WebKit en tant que element.webkitRequestFullscreen().

Note : La spécification utilise le label, "Fullscreen" comme dans "requestFullscreen" ou "fullscreenEnabled" - sans 's' majuscule. L'implémentation décrite ici et les autres implémentations préfixées peuvent utiliser un 'S' majuscule.

Prenons cet élément <video> :

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Différences de présentation

Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "width: 100%; height: 100%". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "width: 100%; height: 100%;" à l'élément :

#myvideo:-webkit-full-screen  {
  width: 100%;
  height: 100%;
}

D'un autre côté, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.

Notification

Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type  mozfullscreenchange. Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  mozfullscreenchange. Notez que l'événement  en lui-même mozfullscreenchange ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle mozFullScreenElement, vous savez que vous êtes en mode plein écran.

Lorsqu'une demande de plein écran échoue

Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements <iframe> possèdent l'attribut mozallowfullscreen  (webkitallowfullscreen, etc) pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  mozfullscreenerror . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir..

Sortir du mode plein écran

L'utilisateur peut toujours du mode plein écran quand il le désire; voir Things your users want to know. Vous pouvez également le faire en appelant la méthode cancelFullscreen() ; Elle est implémentée dans  Gecko sous le nom  mozCancelFullScreen() et dans  WebKit comme webkitCancelFullScreen().

Autre information

Le document fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran:

fullscreenElement
L'attribut fullscreenElement vous indique le element qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.
fullscreenEnabled
L'attribut fullscreenEnabled vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.

Choses que vos utilisateurs doivent savoir

Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche ECHAP (ou F11) pour sortir du mode plein écran.

Parallèlement, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, Alt-Tab) pendant le mode plein écran, implique la sortie du mode plein écran de la même façon.

Exemple

Dans cet exemple, une vidéo est affichée dans une page web. La touche Entrée permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran.

Voir l'exemple sur une page

Action sur la touche Entrée

Quand la page est chargée, ce code est exécuté pour mettre en place un event listener permettant de surveiller la moindre action sur la touche 'Entrée'.

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

Passer en mode plein écran

Ce code est appelé lorsque l'utilisateur appuie sur la touche Entrée, comme vu plus haut.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

Dans un premier temps, la valeur de l'attribut fullscreenElement est analysée dans le document (en contrôlant qu'il est bien préfixé par -moz- et-webkit-). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant soit element.mozRequestFullScreen() soit la méthode webkitRequestFullscreen(), en fonction de celle qui est disponible.

Si le mode plein écran est déjà activé (fullscreenElement est non nul), nous appelons document.mozCancelFullScreen() ou webkitCancelFullScreen(), dépendant encore une fois du navigateur utilisé.

Compatibilité des navigateurs

Bien que Gecko et WebKit implémentent tous deux un support de cette API, il y a quelques subtiles différences. Cette documentation ne contient pas forcément toutes les versions pour chaque navigateur. Cet article sera mis à jour en fonction de l'évolution des spécifications et des implémentations.

Fonctionnalité
  Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support basique 15 -webkit 9.0 (9.0) -moz ? 12.10 5.0 -webkit
fullscreenEnabled 20 -webkit 10.0 (10.0) -moz ? 12.10 5.1 -webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support basique ? 9.0 (9.0)-moz ? ? ?
fullscreenEnabled ? 10.0 (10.0) moz ? ? ?

Notes pour Gecko

Bien que cette API a été introduite dans la version Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), elle n'est pas activée par défaut dans cette version. Pour l'activer, modifiez l'attribut full-screen-api.enabled à true. Cette API est activée par défault dans Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7). Dans Gecko l'API est nommée "fullScreen".

Spécifications

Fullscreen API

Méthodes non standard

Il y a quelques méthodes que les navigateurs ont implémenté avant que les standards aient été introduits. Il est donc plus sage d'utiliser les méthodes standards détaillées plus haut plutôt que les méthodes suivantes :

  • window.fullScreen (Firefox)
  • HTMLMediaElement.webkitDisplayingFullscreen
  • HTMLMediaElement.webkitEnterFullscreen
  • HTMLMediaElement.webkitExitFullscreen
  • HTMLMediaElement.webkitSupportsFullscreen

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Gaelliss, kiux, warpdesign, Rudloff
 Dernière mise à jour par : Gaelliss,