mozilla
Vos résultats de recherche

    Utiliser le mode plein écran

    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 artile 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 occupe 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 cette é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 :

    :-webkit-full-screen #myvideo {
      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

    When fullscreen mode is successfully engaged, the document which contains the document receives a mozfullscreenchange event. When fullscreen mode is exited, the document again receives a  mozfullscreenchange event. Note that the mozfullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null mozFullScreenElement, you know you're in fullscreen mode.

    When a fullscreen request fails

    It's not guaranteed that you'll be able to switch into fullscreen mode. For example, <iframe> elements have the mozallowfullscreen attribute (webkitallowfullscreen, etc) in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a mozfullscreenerror event. When a fullscreen request fails Firefox will log an error message to the Web Console explaining why the request failed.

    Getting out of full screen mode

    The user always has the ability to exit fullscreen mode of their own accord; see Things your users want to know. You can also do so programmatically by calling the cancelFullscreen() method; this is implemented in Gecko as mozCancelFullScreen() and WebKit as webkitCancelFullScreen().

    Other information

    The document provides some additional information that can be useful when developing fullscreen web applications:

    fullscreenElement
    The fullscreenElement attribute tells you the element that's currently being displayed fullscreen. If this is non-null, the document is in fullscreen mode. If this is null, the document is not in fullscreen mode.
    fullscreenEnabled
    The fullscreenEnabled attribute tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.

    Things your users want to know

    You'll want to be sure to let your users know that they can press the ESC key (or F11) to exit fullscreen mode.

    In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

    Example

    In this example, a video is presented in a web page. Pressing the Return or Enter key lets the user toggle between windowed and fullscreen presentation of the video.

    Voir l'exemple sur une page

    Watching for the Enter key

    When the page is loaded, this code is run to set up an event listener to watch for the 'enter' key.

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

    Toggling fullscreen mode

    This code is called when the user hits the Enter key, as seen above.

    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();
        }
      }
    }
    

    This starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both -moz- and -webkit-). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either element.mozRequestFullScreen() or webkitRequestFullscreen(), depending on which is available.

    If fullscreen mode is already active (fullscreenElement is non-null), we call document.mozCancelFullScreen() or webkitCancelFullScreen(), again depending on which browser is in use.

    Browser compatibility

    Although both Gecko and WebKit implement a draft of this API, there are some subtle differences. This document doesn't necessarily try to call them all into focus. The article will be revised as the spec and implementations fall closer into alignment with one another.

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 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
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? 9.0 (9.0)-moz ? ? ?
    fullscreenEnabled ? 10.0 (10.0) moz ? ? ?

    Gecko notes

    Although this API was introduced in Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), it's not enabled by default in that release. To enable it, set the full-screen-api.enabled preference to true. The API is enabled by default in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7). In Gecko all the API is spelt "fullScreen".

    Specification

    Fullscreen API

    Non-standard methods

    These are some of the methods that browsers implemented before the standard was drafted. Having the standard methods described above it's better to avoid using the following ones:

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

    See also

    Étiquettes et contributeurs liés au document

    Contributors to this page: Rudloff
    Dernière mise à jour par : Rudloff,