L'API JavaScript Full Screen

Paul Underwood

Traducteurs

| Sébastien Germez | vermine |

Dans ce tutoriel nous allons voir comment utiliser l'API JavaScript full screen sur des éléments HTML.

Commentez

- Titre : L'API JavaScript Full Screen

- Auteur : Paul Underwood

- Traducteurs : Sébastien Germez, vermine

- Parution : 30 octobre 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Navigateurs supportés

- III-A. Vérifier que le navigateur supporte l'API

- III-B. Quitter le mode plein écran

- III-C. Personnalisation

- IV. Le projet Screenfull.js sur GitHub

- V. Exemples d'utilisation

- VI. Conclusion

- VII. Liens

- VIII. Remerciements

I - Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Javascript FullScreen API.

II - Introduction

L'API full screen (mode plein écran) est un moyen facile d'obtenir le contenu Web complet que vous voulez afficher en mode plein écran. Il est très similaire à la touche F11 de votre clavier, mais laisse le choix aux développeurs. C'est une fonctionnalité intéressante à utiliser par exemple avec des diaporamas, vous pouvez renverser le navigateur en mode plein écran via le clic sur une image.

La meilleure chose à propos de cette fonctionnalité est que l'élément ne doit pas être une page entière, vous pouvez mettre n'importe quel élément HTML en plein écran. Cela signifie que plutôt que de toujours mettre la page entière en mode plein écran, vous n'avez qu'à assigner l'API full screen à une image et au moment du clic sur l'image, vous n'afficherez que l'image en mode plein écran.

III - Navigateurs supportés

Malheureusement, tous les navigateurs ne prennent pas en charge cette fonctionnalité donc vous avez besoin de vous assurer que le navigateur de vos visiteurs prend en charge cette fonctionnalité avant d'essayer de l'utiliser.

Si le navigateur qu'ils utilisent supporte l'API, alors vous pouvez l'utiliser. Si le navigateur ne la supporte pas, alors vous pouvez être sûr que vous allez devoir faire autre chose que d'utiliser le mode plein écran.

Selon le site Can I Use, sont actuellement compatibles les navigateurs suivants :

- Chrome 15+ ;

- Firefox 10+ ;

- Safari 5.1+ ;

- Opera 12.50+.

Safari 5.1 ne supporte pas l'utilisation du clavier en mode plein écran.

III-A - Vérifier que le navigateur supporte l'API

Pour vérifier si un navigateur prend en charge cette fonctionnalité, vous pouvez utiliser l'extrait de code suivant :

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}

Ce test utilise la méthode requestFullscreen. Si elle retourne true, vous pouvez utiliser l'API.

Firefox et Chrome ont leurs propres méthodes pour cela et sont préfixées par moz et webkit, c'est-à-dire mozRequestFullScreen et webkitRequestFullScreen. Une fois ces méthodes détectées, vous pouvez utiliser ensuite la méthode du mode plein écran.

III-B - Quitter le mode plein écran

Pour quitter le mode plein écran, il y a également une méthode. Voici un extrait de code que vous pouvez associer à un bouton sur votre page pour annuler le mode plein écran et revenir à l'affichage normal :

if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}

III-C - Personnalisation

C'est possible grâce à cette fonctionnalité CSS livrée avec des nouvelles pseudoclasses permettant de modifier le style uniquement en mode plein écran :

html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}

IV - Le projet Screenfull.js sur GitHub

J'ai récemment découvert un bon plugin JavaScript sur GitHub qui agit comme une couche pour l'API du mode plein écran du HTML5. L'avantage d'utiliser ce plugin au lieu du JavaScript brut est qu'il gère tous les problèmes de compatibilité des navigateurs que vous obtenez lorsque vous travaillez avec le JavaScript brut.

Un attribut statique est visible à la fois depuis la classe et depuis n'importe quelle instance de la classe.

Pour utiliser screenfull.js, c'est très facile. Tout ce que vous devez faire est d'utiliser l'extrait de code suivant :

if ( screenfull ) {
screenfull.request();
}

Pour télécharger screenfull.js, vous devez aller sur la page GitHub du projet.

V - Exemples d'utilisation

Pour utiliser screenfull.js, c'est très simple. Voici quelques exemples d'utilisation.

Pour vérifier si le mode plein écran est pris en charge, utilisez l'extrait de code suivant :

<script>
$(function() {
if(screenfull)
{
$('#supported').text('Oui');
} else {
$('#supported').text('Non');
}
});
</script>
Votre navigateur supporte-t-il l'API full screen ? <span id="supported"></span>

Lorsque vous savez que le navigateur prend en charge l'API, vous pouvez activer le mode plein écran sur un événement click d'un bouton tout simplement en utilisant ce code :

var target = $('#target')[0]; // Récupère l'élément du DOM d'après la collection d'objets jQuery
$('#button').click(function() {
if ( screenfull ) {
screenfull.request( target );
}
});

Vous pouvez également joindre cela à toutes les images de la page à l'aide de cet extrait de code :

$('img').click(function() {
if ( screenfull ) {
screenfull.toggle( this );
}
});

Regardez la démonstration pour voir des exemples d'utilisation de screenfull.js.

VI - Conclusion

Nous avons vu dans ce tutoriel comment utiliser l'API JavaScript full screen sur des éléments HTML.

VII - Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

VIII - Remerciements

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.