Fullscreen API : Démo HTML5
Mise à jour : 2017-11-08
L'utilisateur est alors informé du passage en plein écran, son consentement est requis et il est aussi informé de la manière de quitter ce mode.
Fullscreen API
- requestFullscreen() : permet de passer l'élément en plein écran.
- exitFullscreen() : permet de quitter le mode plein écran.
- Attributs du document :
- fullscreenEnabled : indicateur de la capacité à utiliser le mode plein écran.
- fullscreenElement : élément actuellement en plein écran, ou null si aucun.
- Évènements :
- onfullscreenchange : envoyé lorsque l'écran bascule d'un état à un autre.
- onfullscreenerror : envoyé lorsqu'un problème est rencontré lors du passage en plein écran.
- Pseudo-classe CSS :
- :fullscreen : style appliqué en plein écran.
- Pseudo-élément CSS :
- ::backdrop : style appliqué au cadre sous-jacent.
Notes sur le tuto
- À tout moment les touches [Échap]/[Esc] ou [F11] permettent de quitter le mode plein écran.
- Limitations :
- Certaines contraintes sont mises en place volontairement afin de réduire les possibilités d'abus de cette fonctionnalité, comme par exemple l'obligation d'avoir une action au clavier ou à la souris au préalable.
- Certains éléments, comme les <iframe>, nécessitent l'attribut "allowfullscreen".
- Tous les navigateurs supportent cette fonctionnalité, mais avec un préfixe et parfois même une ancienne spécification :
- Edge est le seul à supporter la forme standard (ainsi que le préfixe webkit).
- Mozilla : Attention au "S" majuscule dans "FullScreen".
- Safari ne le supporte pas en version mobile.
- IE ne donne pas accès aux ascenseurs en plein écran.
- Les évènements liés au passage en plein écran via la touche [F11] ne sont pas captés.
- La librairie JavaScript screenfull.js permet de s'affranchir des différences d'implémentations entre navigateurs :
- Article complet et à jour : sitepoint.
- API plein écran : Microsoft Developer Network..
- Utiliser le mode plein écran : Mozilla Developper Network :
- Exemple : Mozilla Developper Network.
- Test : Microsoft Developper Network.
- Voir aussi :
Exemple de code HTML5
<!--_fullscreen.css /* Mode plein écran sur fond vert et arrière-plan jaune */ :fullscreen {background: green} ::backdrop {background: yellow} :-moz-full-screen {background: green} :-ms-fullscreen {background: green} ::-ms-backdrop {background: yellow} :-webkit-full-screen {background: green} --> Standard (Edge) : <button onclick="document.documentElement.requestFullscreen()">Passer en plein écran</button> <button onclick="document.exitFullscreen()">Quitter le plein écran</button><br> <span id="std"></span><br> <script> std = document.getElementById("std") function fullscreenStatus(engine, enabled, element) { msg = "Plein écran " + (enabled ? "" : "non ") + "supporté.<br>" msg += "Élément en plein écran : " + element engine.innerHTML = msg engine.className = (enabled ? "ok" : "ko") } fullscreenStatus(std, document.fullscreenEnabled, document.fullscreenElement) document.addEventListener("fullscreenchange", function(){ fullscreenStatus(std, document.fullscreenEnabled, document.fullscreenElement)}) document.addEventListener("fullscreenerror", function() { std.innerHTML = "Erreur de passage en plein écran !" std.className = "ko" }) </script> <br> <u>Préfixes</u> :<br> <br> Microsoft (10 ≤ Internet Explorer ≤ 11) : <button onclick="document.documentElement.msRequestFullscreen()">Passer en plein écran</button> <button onclick="document.msExitFullscreen()">Quitter le plein écran</button><br> <span id="ms"></span><br> <script> ms = document.getElementById("ms") fullscreenStatus(ms, document.msFullscreenEnabled, document.msFullscreenElement) document.addEventListener("MSFullscreenChange", function(){ fullscreenStatus(ms, document.msFullscreenEnabled, document.msFullscreenElement)}) document.addEventListener("MSFullscreenError", function() { ms.innerHTML = "Erreur de passage en plein écran !" ms.className = "ko" }) </script> <br> Mozilla (Firefox) : <button onclick="document.documentElement.mozRequestFullScreen()">Passer en plein écran</button> <button onclick="document.mozCancelFullScreen()">Quitter le plein écran</button><br> <span id="moz"></span><br> <script> moz = document.getElementById("moz") fullscreenStatus(moz, document.mozFullScreenEnabled, document.mozFullScreenElement) document.addEventListener("mozfullscreenchange", function(){ fullscreenStatus(moz, document.mozFullScreenEnabled, document.mozFullScreenElement)}) document.addEventListener("mozfullscreenerror", function() { moz.innerHTML = "Erreur de passage en plein écran !" moz.className = "ko" }) </script> <br> Webkit (Chrome, Opera, Safari) : <button onclick="document.documentElement.webkitRequestFullscreen()">Passer en plein écran</button> <button onclick="document.webkitExitFullscreen()">Quitter le plein écran</button><br> <span id="webkit"></span> <script> webkit = document.getElementById("webkit") fullscreenStatus(webkit, document.webkitFullscreenEnabled, document.webkitFullscreenElement) document.addEventListener("webkitfullscreenchange", function(){ fullscreenStatus(webkit, document.webkitFullscreenEnabled, document.webkitFullscreenElement)}) document.addEventListener("webkitfullscreenerror", function() { webkit.innerHTML = "Erreur de passage en plein écran !" webkit.className = "ko" }) </script>
Démonstration du résultat HTML5
Standard (Edge) :
Préfixes :
Microsoft (10 ≤ Internet Explorer ≤ 11) :
Mozilla (Firefox) :
Webkit (Chrome, Opera, Safari) :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isItemSupported("document.documentElement.requestFullscreen", true) isItemSupported("document.exitFullscreen", true) isItemSupported("document.fullscreenEnabled") isItemSupported("document.fullscreenElement") isItemSupported("document.documentElement.msRequestFullscreen", true) isItemSupported("document.msExitFullscreen", true) isItemSupported("document.msFullscreenEnabled") isItemSupported("document.msFullscreenElement") isItemSupported("document.documentElement.mozRequestFullScreen", true) isItemSupported("document.mozCancelFullScreen", true) isItemSupported("document.mozFullScreenEnabled") isItemSupported("document.mozFullScreenElement") isItemSupported("document.documentElement.webkitRequestFullscreen", true) isItemSupported("document.webkitExitFullscreen", true) isItemSupported("document.webkitFullscreenEnabled") isItemSupported("document.webkitFullscreenElement") </script>