Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous

Identifiant
Mot de passe

Mot de passe oublié ?

Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

L'API JavaScript Full Screen

Article de Paul Underwood traduit par vermine

Le 26 octobre 2012 à 07:40, par vermine

5 commentaires

28PARTAGES

Je vous propose une traduction de l'article anglophone Javascript FullScreen API de Paul Underwood.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

L'API JavaScript Full Screen

Vous avez lu gratuitement 11 638 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

Votre nom : Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :

5 commentaires

Commenter Signaler un problème

argyronet

Rédacteur/Modérateur

Le 02/11/2012 à 10:33

Bonjour,

Excellent...

Tu peux ajouter Maxthon 3.45.2000 qui supporte aussi cette API.

Argy

sebcap26

Membre à l'essai

Le 09/04/2013 à 18:51

Bonjour et merci pour ce tuto.

Plutôt que Screenfull, je recommande d'utiliser le polyfill "Fullscreen-API-Polyfill" qu'on trouve également sur GitHub (https://github.com/neovov/Fullscreen-API-Polyfill). Comme tout polyfill qui se respecte, il permet d'utiliser l'API de manière complètement standard sans se soucier des préfixes.

Par contre si tu as une solution pour gérer de la même manière la pseudo classe CSS3 ":fullscreen", ca m'intéresse.

D'autre part, aurais tu des informations "officielles" sur l'interaction entre le passage en fullscreen et l'événement "onresize" ? Est-il déclenché automatiquement ?
(la réponse est oui pour un test sous firefox, mais j'aimerais bien savoir ce qu'il en est dans les standard).

Merci.

gselles

Candidat au Club

Le 31/03/2017 à 9:26

Bonjour,
Lorsque que je change dans la démo proposée
<body> en <body bgcolor=red> le résultat est surprenant lorsqu'on passe en mode fullscreen.
Le fond s'affiche en noir.
Pourrai-je avoir une explication ou est-ce normal ou un bug.
Merci d'avance.
Le test est fait sur Kubuntu 16.04 avec Firefox 50 et Chromium.

vermine

Expert éminent sénior

Le 31/03/2017 à 14:10

Bonjour,

Le fond d'écran par défaut du mode fullscreen est noir. Il est possible de le modifier mais le résultat ne sera peut-être pas celui attendu.

Sache cependant qu'il faut rester logique entre l'utilisation du HTML et du HTML5. Donc à ne pas sortir de son contexte, dans notre exemple ici, qui date tout de même 2012, tu peux :

conserver ou déplacer ton test du bgcolor. En tout cas, il te faut effectivement une notion de couleur de fond quelque part. Cela peut se faire dans le fichier css fournit :

Code css :

Sélectionner tout

1
2
3
4
5
6
body{ 
	font-family: 'Lato', serif; 
	color:#554; 
	font-size:1.6em; 
	background: #B59 
}

ajouter ceci en début de fichier css afin que le body prenne bien tout l'écran en mode fullscreen (ce qui n'est pas le cas par défaut) :
Code css : Sélectionner tout
```
1
2
3
html, body{ 
	height:100% 
}
```
ajouter un id à ton body ;

utiliser cet id au lieu de l'id du container comme paramètre des méthodes screenfull.request, screenfull.toggle, etc. qui sont appelées dans la balise script du HTML. Par exemple :

Code javascript :

Sélectionner tout

1
2
3
$('#request').click(function() { 
	screenfull.request( $('#idBody')[0] ); 
});

Ce qu'il faut comprendre avec le fullscreen, c'est qu'on peut déterminer quel élément de la page va être en fullscreen. Dans la démonstration de l'article, l'élément choisit est le container. C'est pourquoi tu ne vois pas ce qui est en dehors du container, à savoir le fond du body.

Je n'ai testé qu'avec Chrome. Je ne certifie pas que cette solution soit compatible avec tous les navigateurs mais c'est déjà une piste et une petite explication.

melka one

Membre expérimenté

Le 02/04/2017 à 22:21

c'est tout de même le gros bazars cette api

Identifiez-vous

Créer un compte

L'API JavaScript Full Screen Article de Paul Underwood traduit par vermine

L'API JavaScript Full Screen

Article de Paul Underwood traduit par vermine