API plein écran

Vous pouvez utiliser l’API plein écran pour attirer l’attention sur vos vidéos, images ou autre contenu.

L’API plein écran

En utilisant l’API plein écran, vous pouvez attirer l’attention des utilisateurs sur des éléments spécifiques et masquer des arrière-plans ou d’autres applications.

La spécification W3C Fullscreen n’étant pas finale, la plupart des fabricants de navigateur préfixent l’API à l’aide d’un identificateur unique. Dans ce cas, Microsoft utilise ms. Il est conseillé d’utiliser une seule fonction qui demande le mode plein écran avec tous les préfixes, comme c’est le cas dans la plupart des exemples proposés ici. Pour améliorer les performances, placez le nom de l’API W3C en premier, suivi par les versions préfixées.

Remarque  Les exemples de cet article utilisent une API préfixée basée sur la date de publication de la rubrique, qui peut être changée à tout moment.

Ce tableau indique les API plein écran disponibles dans Internet Explorer 11.

MembreType Description
msRequestFullscreen MéthodeDemande un affichage plein écran d’une image, d’une vidéo ou d’un autre élément.
msExitFullscreen MéthodeRetourne un élément à sa taille d’origine à partir du mode plein écran.
msFullscreenElement PropriétéRetourne le premier élément ou l’élément actif affiché en mode plein écran. Dans le cas contraire, retourne undefined.
msFullscreenEnabled PropriétéRetourne true si un document autorise l’affichage des éléments en mode plein écran. Dans le cas contraire, retourne false.
MSFullscreenChange ÉvénementEst déclenché quand un élément est affiché en mode plein écran ou quand il quitte le mode plein écran.
MSFullscreenError ÉvénementEst déclenché quand un affichage plein écran est demandé pour un élément, mais que cette demande n’aboutit pas.
:-ms-fullscreen Pseudo-classeVous permet de définir des propriétés CSS spécifiques basées sur le mode plein écran d’un élément.
::-ms-backdrop Pseudo-élémentVous permet de définir les propriétés d’arrière-plan quand un élément est affiché en mode plein écran.
allowfullscreen AttributPermet à du contenu iframe d’être affiché en mode plein écran. Si cet attribut est manquant, seul l’iframe (et non le contenu du cadre) peut basculer en mode plein écran.

 

Ouvrir un élément en mode plein écran

Vous pouvez ouvrir une vidéo, une image ou un autre élément en mode plein écran en appelant la méthode msRequestFullscreen(). Dans IE11, la vidéo remplit l’écran, et tout le reste (éléments paragraph, div et image) demeure inchangé. Le reste de l’écran est noir sauf si vous avez utilisé ::-ms-backdrop pour l’arrière-plan.


document.getElementById("myImage").msRequestFullscreen();

Dans IE11, vous pouvez empêcher l’ouverture en mode plein écran du contenu non autorisé. Pour cela, vous devez appeler msRequestFullscreen à partir d’un événement déclenché par l’utilisateur (par exemple, un clic sur un bouton), plutôt qu’automatiquement par un script. Quand le contenu passe en mode plein écran, IE11 demande à l’utilisateur s’il doit l’ouvrir. Si l’utilisateur est d’accord, le contenu s’ouvre entouré par un arrière-plan noir (le contenu est le seul élément visible à l’écran). Si un utilisateur dispose de plusieurs écrans, le plein écran ne s’applique qu’à un seul écran.


    // Initiated by a user click on an element 

    function makeFullScreen(divObj) {
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }

Quitter le mode plein écran

Les utilisateurs peuvent facilement quitter le mode plein écran à tout moment en appuyant sur la touche Échap. Pour quitter le mode plein écran sous contrôle du programme, utilisez la méthode msExitFullscreen. À la différence de msRequestFullscreen, qui s’applique à un élément, msExitFullscreen s’applique à l’élément document. L’élément affiché en mode plein écran n’a donc pas d’importance. En utilisant cet exemple, vous pouvez ouvrir un élément en mode plein écran en cliquant dessus, puis rétablir l’élément à sa taille d’origine quand vous cliquez de nouveau dessus.


<!DOCTYPE html>
<html>
  <head>
    <title>msExitFullscreen API test</title>
  </head>
  <body>
    <div id="div1" class="fullScreen" style="width: 600px; height: 350px; background-color: yellow">
      Div1 
    </div>
    <div id="div2" class="fullScreen" style="width: 600px; height: 350px; background-color: red">
      Div2            
    </div>
    <script type="text/javascript">
      var inFullScreen = false; // flag to show when full screen

      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false) {
            makeFullScreen(evt.target); // open to full screen
          } else {
            reset();
          }
        }, false);
      }

  
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        inFullScreen = false;
        return;
      }


    </script>
  </body>
</html>


D’autres actions peuvent forcer un élément à quitter le mode plein écran, par exemple quand un utilisateur :

  • sélectionner une icône ;
  • ancre une instance du navigateur sur un côté de l’écran ;
  • clique sur le bouton Windows sur une tablette sans clavier ;
  • supprime l’élément actuellement en mode plein écran du modèle DOM (Document Object Model) ;
  • accède à une nouvelle URL ;
  • effectue un balayage vers le bas à partir du haut de l’écran ;
  • effectue un balayage vers le haut à partir du bas de l’écran ;
Remarque  Si un élément perd le focus quand il se trouve en mode plein écran, il ne quitte pas le mode plein écran.

Trouver un élément en mode plein écran

Vous pouvez rechercher le premier élément actuellement affiché en mode plein écran à l’aide de la propriété msFullscreenElement sur l’élément document. Cette propriété retourne l’élément affiché en mode plein écran. Si aucun élément n’est actuellement ouvert en mode plein écran, elle retourne null.

Cet exemple montre deux éléments <div> qui, en cas de clic, impriment le msFullscreenElement dans leur innerHTML. Un


<!DOCTYPE html>

<html>
  <head>
    <title>msFullscreenElement test</title>
    <style>
      /* Add a white border*/
      div {
        border: solid 2px white;
      }
    </style>
  </head>
  <body>
    <div class="fullScreen" id="div-1" style="width:600px; height:350px; background-color:yellow">
      This is Div 1
    </div><p></p>
    <div class="noFullScreen" id="div-2" style="width:600px; height:350px; background-color:red">
       This is Div 2 
    </div>

    <script>
        var inFullScreen = false;  // flag for in or out of full-screen mode. 
        // set up div that doesn't go into full-screen mode on the click event
        var nfsClass = document.getElementsByClassName("noFullScreen");
        for (var i = 0; i < nfsClass.length; i++) {
            nfsClass[i].addEventListener("click", function (evt) {
                evt.target.innerHTML = getFSWindow();
            }, false);
        }



      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false) {
            makeFullScreen(evt.target); // open to full screen
            evt.target.innerHTML = getFSWindow().id;
          } else {
            reset();
          }
        }, false);
      }

     /* // set up any div with fullscreen class to go full screen when clicked
      var fsClass = document.getElementsByClassName("fullScreen");    
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          setTimeout(reset, 10000); // Set a time out for 10 seconds
          makeFullScreen(evt.target); // open to full screen  
          evt.target.innerHTML = getFSWindow();
        }, false);
      }
 */
      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      //  reset full screen across several browsers
      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
           document.webkitCancelFullScreen();
        }
        inFullScreen = false;
         return;
       }

       //  get full screen element across several browsers
       function getFSWindow() {
         if (document.fullscreenElement) {
           return document.fullscreenElement;
         }
         else if (document.msFullscreenElement) {
           return document.msFullscreenElement;
         }
         else if (document.mozFullScreenElement) {
           return document.mozFullScreenElement;
         }
         else if (document.webkitFullscreenElement) {
           return document.webkitFullscreenElement;
         }
       }
    </script>
  </body>
</html>


Cliquez sur le premier élément <div> pour l’ouvrir en mode plein écran et l’élément (HTMLDivElement) est affiché dans le innerHTML de l’élément div. Cliquez de nouveau pour quitter le mode plein écran. Maintenant, quand vous cliquez sur le second élément <div>, il ne passe pas en mode plein écran et le mot undefined est affiché dans l’élément <div>.

Utiliser un iframe en mode plein écran

Par défaut, un iframe s’ouvre en mode plein écran, mais pas son contenu. En effet, le iframe est un enfant du document d’origine, mais pas son contenu, qui appartient au iframe. Le contenu de l’iframe peut avoir une origine inconnue, par exemple un site malveillant. Pour autoriser le contenu d’un iframe à s’ouvrir en mode plein écran, définissez l’attribut allowfullscreen sur l’élément iframe.

Adobe Flash est une exception. Quand un contrôle Flash est incorporé via un iframe, il est toujours autorisé à s’afficher en mode plein écran, indépendamment du fait que l’attribut allowfullscreen soit défini ou non pour l’iframe.

Cet exemple montre comment la définition de allowfullscreen affecte la façon dont un iframe affiche le contenu en mode plein écran. Les deux iframes affichent exactement la même page Web. Quand vous cliquez sur les boutons Frame 1 ou Frame 2, un iframe s’ouvre en mode plein écran. Le contenu affiché dans chaque iframe est la même page HTML pour les deux frames. Dans la mesure où l’attribut allowfullscreen est défini uniquement pour le premier iframe, seul le contenu du premier iframe peut passer en mode plein écran. Le contenu du second iframe reste inchangé suite à un clic, et un événement MSFullscreenError se déclenche.


<!DOCTYPE html>
<html>
  <head>
    <title>allowfullscreen attribute test</title>
  </head>
  <body>
    <!-- include all prefixed versions of the attribute -->
    <iframe id="frame1" allowfullscreen mozallowfullscreen webkitallowfullscreen width="400" height="300" src="iframeTest.html"></iframe>
    <iframe id="frame2" width="400" height="300" src="iframeTest.html"></iframe>
    <br />
    <button onclick="makeFullScreen('frame1');">Frame 1 full screen</button>
    <button onclick="makeFullScreen('frame2');">Frame 2 full screen</button>
     
    <script type="text/javascript">
      function makeFullScreen(frame) {
        divObj = document.getElementById(frame);
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
          // Moz uses camel case caps on "screen"
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
      }
    </script>
  </body>
</html>


Cet exemple montre le fichier iframeTest.html pour chaque iframe de l’exemple précédent.


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>fullscreen element test file</title>

  </head>
  <body>
    <div class="fullScreen" style="width:600px; height:350px; background-color:yellow">
      This is Div 1
    </div>
    <script>
      // set up any div with fullscreen class to go full screen when clicked
      var inFullScreen = false;

      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false) {
            makeFullScreen(evt.target); // open to full screen
          } else {
            reset();
          }
        }, false);
      }

      document.addEventListener("MSFullscreenError", function (evt) {
        console.error("full screen error has occured " + evt.target);
      }, true);

      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      //  reset full screen across several browsers
      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
       else if (document.cancelFullScreen) {
         document.cancelFullScreen();
       }
       else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
       }
        inFullScreen = false;
        return;

      }   

    </script>
  </body>
</html>


Déterminer si le mode plein écran est possible

La propriété msFullscreenEnabled retourne une valeur indiquant si un document peut s’afficher ou non en mode plein écran. Sa principale utilisation est de vérifier si l’attribut allowfullscreen est défini pour le contentDocument d’un iframe. Quand le contentDocument d’un iframe a l’attribut allowfullscreen, msFullscreenEnabled retourne la valeur true, sinon false. msFullscreenEnabled ne doit pas être utilisé pour détecter la fonctionnalité plein écran en général.


var isFullScreenEnabled;
if(document.fullscreenEnabled){
   isFullScreenEnabled = document.fullscreenEnabled;
}
else if(document.msFullscreenEnabled){ 
   isFullScreenEnabled = document.msFullscreenEnabled;
} 
else if (document.mozFullScreenEnabled){
   isFullScreenEnabled = document.mozFullScreenEnabled;
}


Détecter les modifications du mode plein écran

L’événement MSFullscreenChange détecte quand des éléments passent en mode plein écran ou le quittent. L’exemple suivant affiche un message sur la console quand un élément entre ou quitte le mode plein écran.


if (document.requestFullscreen) {
  document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement != null) {
      console.info("Went full screen");
    } else {
      console.info("Exited full screen");
    }
  });
}
else if (document.msRequestFullscreen) {
  document.addEventListener("MSFullscreenChange", function () {
    if (document.msFullscreenElement != null) {
      console.info("Went full screen");
    } else {
      console.info("Exited full screen");
    }
  });
}
     // no info on other browsers


L’événement MSFullscreenChange est déclenché quand un élément passe en mode plein écran ou le quitte, afin que vous puissiez obtenir l’état actuel. Dans cet exemple, nous vérifions msFullscreenElement pour savoir si des éléments sont en mode plein écran. Si un élément est en mode plein écran, l’élément est retourné, sinon msFullscreenElement retourne null.

Remarque  Appuyez sur F12 pour ouvrir les outils de développement F12 lors de l’exécution de la démonstration pour voir la sortie de l’exemple. Ouvrez l’onglet Console pour voir les messages. Quand l’exemple passe en mode plein écran, « Mode plein écran » s’affiche, quand il quitte le mode plein écran « Sortie du mode plein écran » s’affiche.

Identifier les erreurs du mode plein écran

Le mode plein écran dispose de son propre événement d’erreur, MSFullscreenError. Cet événement est déclenché quand une demande de mode plein écran a été faite, mais qu’elle ne peut pas être honorée. Cet extrait de code montre un gestionnaire d’événements simple pour MSFullscreenError.


document.addEventListener("MSFullscreenError", function (evt) {
  console.error("full screen error has occured " + evt.target);
}, true);


Utiliser des pseudo-éléments CSS pour le style de plein écran

À l’aide de la pseudo-classe CSS :-ms-fullscreen et du pseudo-élément CSS ::-ms-backdrop, vous pouvez changer le style d’un élément de page en fonction de l’état du mode plein écran. Avec :-ms-fullscreen, vous pouvez changer le style d’affichage d’un élément en mode plein écran. Pour la plupart des éléments, tels qu’un élément <div>, les styles que vous pouvez changer comprennent position, color ou size.

À l’exception de l’élément vidéo, les éléments en mode plein écran conservent leur taille et sont entourés par un arrière-plan noir. Vous pouvez changer l’arrière-plan en utilisant le pseudo-élément ::-ms-backdrop. Il peut s’agir d’une image, d’une autre couleur ou d’une bordure. L’arrière-plan d’un élément vidéo qui se trouve dans un cadre ou un pillarbox n’est pas affecté par ::-ms-backdrop.

Cet exemple s’exécute uniquement dans IE11 et ne contient pas de code pouvant être utilisé dans d’autres navigateurs. Il affiche initialement une zone bleue. Quand vous cliquez dessus, elle passe en mode plein écran, elle se déplace de 200 pixels vers le bas et de 200 pixels au-dessus et sa couleur passe au vert. Cela est possible en détectant le mode plein écran à l’aide de la pseudo-classe :-ms-fullscreen et en appliquant de nouveaux styles. L’arrière-plan autour de la zone change de couleur (magenta) en utilisant le pseudo-élément ::-ms-backdrop.


<!DOCTYPE html>

<html>
  <head>
    <title>Pseudo element test</title>
    /* this example only works in the Internet Explorer */
      <style type="text/css" media="screen">
        /* Normal view */
        #test {
          width: 200px;
          height: 200px;
          background-color: blue;
        }
   /* W3C section */    
        /* How to display when full screen */ 
       #test:-fullscreen {
         position:absolute;
         left:200px;
         top:200px;
         width: 400px;
         height: 400px;
         background-color: green;
       }
       
       /* What color to show the background */
       #test:-fullscreen::-backdrop {
         background-color: magenta;
       }
   /* Microsoft section */    
        /* How to display when full screen */ 
       #test:-ms-fullscreen {
         position:absolute;
         left:200px;
         top:200px;
         width: 400px;
         height: 400px;
         background-color: green;
       }
       
       /* What color to show the background */
       #test:-ms-fullscreen::-ms-backdrop {
         background-color: magenta;
       }       

    </style>
  </head>
  <body>    
    <div class="fullscreen" id="test">
    </div>

    <script>
      var fsClass = document.getElementsByClassName("fullscreen");

      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
         makeFullScreen(evt.target); // open to full screen
        }, false);
      }

      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
      }

    </script>
  </body>
</html>


La façon dont un élément s’affiche en mode plein écran dépend du navigateur. D’autres navigateurs peuvent agrandir l’élément afin qu’il remplisse l’écran et ne prennent pas en charge le pseudo-élément d’arrière plan.

Vous pouvez utiliser :-ms-fullscreen pour changer le comportement afin que l’élément remplisse l’écran sans arrière-plan. Quand l’élément passe en mode plein écran, vous pouvez utiliser les valeurs de propriétés CSS largeur et hauteur 100 % pour qu’il s’ajuste à la fenêtre. Cet exemple agrandit une petite zone pour remplir l’écran. Il contient également l’équivalent Webkit de :-ms-fullscreen .


<!DOCTYPE html>

<html>
  <head>
    <title>ms-fullscreen pseudo class test</title>

    <style type="text/css" media="screen">
      
      /* Normal view */
      #test {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      
      /* How to display when full screen */ 
      /* Microsoft */
      #test:-ms-fullscreen {
        position:absolute;
        left:0px;
        top:0px;
        width: 100%;
        height: 100%;          
      }
      
            
      /* How to display when full screen */ 
      /* Webkit */
       #test:-webkit-full-screen {
        position:absolute;
        left:0px;
        top:0px;
        width: 100%;
        height: 100%;          
      }
   
      /* Mozilla */
       #test:-moz-full-screen {
      /* Mozilla/Gecko automatically scales to 100% */
       /* put CSS in here*/
      }

    </style>
  </head>

  <body>    
    <div class="fullscreen" id="test"></div>

    <script>
      var fsClass = document.getElementsByClassName("fullscreen");

      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          makeFullScreen(evt.target); // open to full screen
        }, false);
      }
      //  request full screen across several browsers
      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }

      }

    </script>
  </body>
</html>


Informations de référence sur les API

msRequestFullscreen
msExitFullscreen
::-ms-background
:-ms-fullscreen
MSFullscreenChange
MSFullscreenError
msFullscreenEnabled
msFullscreenElement
allowfullscreen

Spécification

Fullscreen

 

 

Afficher:
© 2015 Microsoft