API Fullscreen de JavaScript
Introduction à l’API Fullscreen de JavaScript
Dans le domaine du développement web, offrir des expériences utilisateur engageantes est primordial, et l’API Fullscreen de JavaScript joue un rôle crucial pour y parvenir. Cet outil puissant permet aux développeurs de demander par programmation l’affichage en plein écran d’un élément, améliorant considérablement l’expérience de visualisation pour les applications riches en médias, les jeux et autres contenus interactifs.
Activer le mode plein écran en JavaScript
Pour activer le mode plein écran en JavaScript, les développeurs utilisent la méthode requestFullscreen. Cette méthode fait partie de l’API Fullscreen et s’applique à tout élément DOM que vous souhaitez afficher en plein écran. Notez que l’API nécessite un geste de l’utilisateur (comme un clic) pour être déclenchée, c’est pourquoi elle est généralement appelée à l’intérieur d’un gestionnaire d’événement. Voici comment utiliser cette méthode efficacement :
<div id="main-content">
<button id="fs-btn">Go Fullscreen</button>
<div id="video-container">
<!-- Your content like a video or interactive media -->
</div>
</div>
<script>
const element = document.getElementById("video-container");
const btn = document.getElementById("fs-btn");
btn.addEventListener("click", function() {
if (document.fullscreenEnabled) {
element.requestFullscreen().catch(err => {
console.error(`Error attempting to enable fullscreen: ${err.message}`);
});
} else {
console.log("Fullscreen API is not supported in this browser.");
}
});
</script>Cet extrait de code montre comment déclencher le mode plein écran pour un élément spécifique (video-container) à l’aide d’un bouton. Le script vérifie la disponibilité de l’API avant de tenter d’entrer en plein écran, garantissant ainsi une large compatibilité avec les navigateurs modernes. L’utilisation de addEventListener garde le balisage propre et suit les bonnes pratiques modernes.
Quitter le mode plein écran
Pour offrir une expérience utilisateur complète, il est également essentiel de savoir comment quitter le mode plein écran. Les utilisateurs ou les développeurs peuvent vouloir proposer une option permettant de revenir à l’affichage standard après être entré en plein écran. Voici comment vous pouvez implémenter cette fonctionnalité :
<div id="exit-button">
<button id="exit-btn">Exit Fullscreen</button>
</div>
<script>
document.getElementById("exit-btn").addEventListener("click", function() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
});
</script>Dans cet exemple, la fonction exitFullScreen permet à l’utilisateur de quitter le mode plein écran en cliquant sur un bouton « Exit Fullscreen ». Notez que document.exitFullscreen() quitte l’élément actuellement actif en plein écran, quel que soit l’élément qui a initialement déclenché la demande.
Gérer les changements de plein écran avec des événements
L’API Fullscreen fournit des événements qui vous informent lorsqu’un élément entre ou sort du mode plein écran. C’est particulièrement utile pour basculer des éléments d’interface utilisateur ou déclencher d’autres changements dans votre application :
document.addEventListener("fullscreenchange", function(event) {
if (document.fullscreenElement) {
console.log("Entered fullscreen mode");
} else {
console.log("Exited fullscreen mode");
}
});Cet écouteur d’événement enregistre des messages dans la console selon que le document est ou non en mode plein écran, aidant ainsi les développeurs à comprendre les transitions d’état. De plus, vous devez gérer l’événement fullscreenerror pour détecter les cas où le navigateur refuse la demande (par exemple, en raison de restrictions de sécurité ou d’une annulation par l’utilisateur) :
document.addEventListener("fullscreenerror", function(event) {
console.error("Fullscreen request failed:", event.target.error);
});Maintenant, mettons tout cela ensemble et voyons-le dans un exemple :
Un exemple complet :
<div id="main-content">
<button id="fs-btn">Go Fullscreen</button>
<div id="video-container" style="position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;">
<div id="exit-button" style="display: none;">
<button id="exit-btn">Exit Fullscreen</button>
</div>
</div>
</div>
<script>
const element = document.getElementById("video-container");
const exitBtn = document.getElementById("exit-btn");
const exitButtonContainer = document.getElementById("exit-button");
document.getElementById("fs-btn").addEventListener("click", function() {
if (document.fullscreenEnabled) {
element.requestFullscreen().catch(err => {
console.error(`Error attempting to enable fullscreen: ${err.message}`);
});
}
});
exitBtn.addEventListener("click", function() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
});
function updateButtonVisibility() {
exitButtonContainer.style.display = document.fullscreenElement ? "block" : "none";
}
document.addEventListener("fullscreenchange", updateButtonVisibility);
document.addEventListener("fullscreenerror", function(event) {
console.error("Fullscreen request failed:", event.target.error);
});
</script>Voyons la fonctionnalité du code :
Fonctions JavaScript- goFullScreen() : Cette fonction fait passer le conteneur vidéo en mode plein écran. Elle vérifie d’abord que le navigateur prend en charge l’API Fullscreen via document.fullscreenEnabled, puis appelle la méthode standard requestFullscreen().
- exitFullScreen() : Cette fonction quitte le mode plein écran à l’aide de la méthode standard
document.exitFullscreen().
Écouteurs d’événements pour les changements de plein écran- updateButtonVisibility() : Cette fonction ajuste la visibilité du bouton de sortie en fonction du fait qu’un élément soit actuellement en mode plein écran ou non.
- L’écouteur d’événement
fullscreenchangedéclenche cette fonction chaque fois que l’état du plein écran change, garantissant que le bouton de sortie n’apparaît que lorsque le navigateur est en mode plein écran et qu’il est masqué sinon.
Compatibilité et prise en charge des navigateurs
L’API Fullscreen de JavaScript est largement prise en charge par les navigateurs modernes, notamment Chrome, Firefox, Safari, Opera et Edge. Les implémentations modernes utilisent les méthodes standard sans préfixes de fournisseur. Historiquement, Safari nécessitait le préfixe -webkit- (webkitRequestFullscreen, webkitExitFullscreen), mais les versions actuelles prennent entièrement en charge la norme sans préfixe. Pour styliser les éléments lorsqu’ils sont en mode plein écran, vous pouvez utiliser la pseudo-classe CSS :fullscreen :
:fullscreen {
background-color: #000;
color: #fff;
padding: 20px;
}Conclusion
L’API Fullscreen en JavaScript est un outil puissant pour améliorer l’expérience utilisateur sur le web. En proposant des environnements interactifs et immersifs, les développeurs peuvent considérablement améliorer l’engagement et la satisfaction des utilisateurs. Les exemples et méthodes abordés fournissent une base pour intégrer la fonctionnalité plein écran dans vos applications web, garantissant une expérience utilisateur fluide et engageante.
Practice
Which of the following statements are true regarding the JavaScript Fullscreen API?