5 API simples et pratiques en HTML5 (Partie 2, incluant plein écran, visibilité, prise de photo, préchargement, état de la batterie)_html5 compétences tutoriel-Tutoriel H5-php.cn

5 API simples et pratiques en HTML5 (Partie 2, incluant plein écran, visibilité, prise de photo, préchargement, état de la batterie)_html5 compétences tutoriel

WBOY

Libérer： 2016-05-16 15:48:04

original

1387 Les gens l'ont consulté

La naissance du HTML5 nous a fourni de nombreuses nouvelles fonctions et fonctionnalités merveilleuses de JavaScript et HTML. Certaines des nouvelles fonctionnalités sont connues depuis des années et sont largement utilisées, tandis que d'autres sont principalement utilisées dans les technologies mobiles de pointe ou comme fonctions auxiliaires dans les applications de bureau. Aussi puissantes et faciles à utiliser que ces nouvelles fonctionnalités HTML5 soient, elles sont toutes conçues pour nous aider à mieux développer des applications frontales de navigateur. J'ai déjà partagé avec vous un article sur 5 nouvelles fonctionnalités HTML5 que vous ne connaissez pas. J'espère que certaines des technologies mentionnées pourront vous aider à améliorer vos applications Web. Ici, je souhaite également partager avec vous quelques nouvelles fonctionnalités HTML5 que peu de gens connaissent. J'espère qu'elles pourront vous être utiles !

1. Interface API plein écran

La puissante interface API plein écran permet aux programmeurs de lancer le navigateur en mode plein écran via la programmation et de demander l'autorisation de l'utilisateur :

Copier le code

Le code est le suivant :

// Trouver la bonne méthode, appeler le bon élément
function launchFullScreen(element) {
if(element. requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
élément. webkitRequestFullScreen();
}
}

// Lancez le mode plein écran pour les navigateurs qui le prennent en charge !
launchFullScreen(document.documentElement); // la page entière
launchFullScreen(document.getElementById("videoElement")); 🎜>

N'importe quel élément de page peut être la cible d'une sortie en plein écran. HTML5 fournit même une pseudo-classe CSS pour permettre aux programmeurs de contrôler le style des éléments en plein écran lorsque le navigateur est en plein écran. Cette API plein écran est particulièrement utile lorsque vous développez un jeu, en particulier un jeu de tir comme BananaBread.

2. Interface API de visibilité des pages

L'interface API de visibilité de la page fournit un événement d'écoute. Cet événement peut indiquer au programmeur si la page actuelle est un onglet/une fenêtre activé dans le navigateur et si c'est la page que l'utilisateur regarde. Il peut également indiquer au programme quand. pour changer de page et arrêter d'afficher cette page/fenêtre :

Copiez le codeLe code est le suivant :

// Légèrement adapté de Sam Dutton
// Définir le nom de la propriété cachée et l'événement de changement de visibilité
// car certains navigateurs n'offrent qu'un support préfixé par le fournisseur
var caché, état, visibilitéChange ;
if (typeof document.hidden !== "indéfini") {
caché = "caché";
visibilitéChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
Hidden = "mozHidden";
visibleChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document .msHidden !== "indéfini") {
caché = "msHidden";
visibilitéChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden != = "indéfini") {
caché = "webkitHidden";
visibilitéChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// Ajouter un écouteur qui change constamment le titre
document.addEventListener(visibilityChange, function(e) {
// Démarrer ou arrêter le traitement en fonction de l'état

}, false);

En utilisant cette API de manière flexible, les programmeurs peuvent suspendre certaines tâches lourdes (telles que AJAX ou l'animation) lorsque l'utilisateur ne regarde pas cette page.

3. API de l'interface getUserMedia

L'API getUserMedia est une interface très intéressante ! En utilisant cette API et en ajoutant les balises