Introduction détaillée aux compétences du didacticiel HTML5 Plein écran API_html5

Dans de plus en plus d'applications Web réelles, JavaScript devient de plus en plus puissant.

L'API FullScreen est une nouvelle API JavaScript, simple et puissante. FullScreen nous permet de demander par programme un affichage plein écran à l'utilisateur, et si l'interaction est terminée, nous pouvons quitter l'état plein écran à tout moment.

Démonstration en ligne : Exemple d'API plein écran

(Dans cette démo, vous pouvez lancer, masquer et vider pour afficher les propriétés associées, et vous pouvez afficher les informations du journal via la console Chrome.)

Activer le mode plein écran

La méthode API plein écran requestFullscreen utilise toujours le nom de la méthode avec un préfixe dans certains anciens navigateurs, donc une détection et un jugement peuvent être nécessaires :
(Avec un préfixe, cela signifie que chaque noyau de navigateur n'est pas universel.)

Copiez le code

Le code est le suivant :

// Trouver le supporté et utilisez l'élément qui nécessite un appel en plein écran
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen(); else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen() ;
}
}


// Lancer le plein écran dans un navigateur prenant en charge le plein écran
// La page entière
launchFullScreen(document.documentElement // Un élément
launchFullScreen( document.getElementById("videoElement"));

Prenez l'élément DOM qui doit être affiché en plein écran comme paramètre. L'appel de cette méthode peut faire passer la fenêtre en plein écran. Parfois, le consentement de l'utilisateur peut être requis (le navigateur lui-même interagit avec l'utilisateur). l'utilisateur refuse, diverses incomplétude peuvent survenir en plein écran.

Si l'utilisateur accepte de passer en plein écran, la barre d'outils et les autres composants du navigateur seront masqués, ce qui fera que la largeur et la hauteur du cadre du document s'étendront sur tout l'écran.

Quitter le mode plein écran

Utilisez la méthode exitFullscreen pour quitter le navigateur du plein écran et revenir à la mise en page d'origine. Cette méthode prend également en charge la méthode du préfixe sur certains anciens navigateurs

Copiez le code

Le code est le suivant :

// Quitter le plein écran

function exitFullscreen() {

if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen() ;
}
}


// Appelez la méthode de sortie plein écran !
exitFullscreen();


Veuillez noter : exitFullscreen ne peut être que appelé via l'objet document - n'utilisez pas un élément DOM normal.

Propriétés et événements en plein écran

La mauvaise nouvelle est que jusqu'à présent, les événements et les méthodes en plein écran sont toujours préfixés. La bonne nouvelle est que bientôt tous les principaux navigateurs les prendront en charge.

1.document.fullscreenElement : l'élément actuellement en plein écran.

2.document.fullscreenEnabled : indique si le plein écran est actuellement disponible.

Lors de l'entrée/sortie du mode plein écran, l'événement fullscreenchange sera déclenché :

Copier le code

Le code est le suivant :

var fullscreenElement =

document.fullscreenEnabled

|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| 🎜>

Lors de l'initialisation de la méthode plein écran, vous pouvez détecter quel événement doit être surveillé.

CSS plein écran

Le navigateur fournit des règles de contrôle CSS plein écran utiles :

Copiez le code

Le code est le suivant : /* html */

:-webkit-full-screen {

/* propriétés */

}
:-moz-fullscreen {
/* propriétés * /
}


:fullscreen {
/* propriétés */
}


/* éléments plus profonds */
 : -webkit -vidéo plein écran {
largeur : 100 % ;
hauteur : 100 %
}


/* style de la toile de fond */
:: toile de fond {
/* propriétés */
}


Dans certains cas, WebKit nécessite un traitement spécial, donc lorsqu'il s'agit de multimédia, vous aurez peut-être besoin du code ci-dessus.

Je pense que l'API plein écran est super simple et super utile. La première fois que j'ai vu cette API, c'était dans un jeu de tir à la première personne entièrement client appelé Démo BananaBread de MDN, ce qui est vraiment un excellent moyen. pour utiliser le mode plein écran Excellent cas.

L'API plein écran fournit un moyen d'entrer et de sortir du mode plein écran, et fournit les événements correspondants pour surveiller les changements dans l'état plein écran, afin que tous les aspects soient cohérents.

N'oubliez pas cette excellente API : elle vous sera certainement utile à un moment donné dans le futur !