HTML5 fournit des API JavaScript et HTML très puissantes pour aider les développeurs à créer d'étonnantes applications de bureau et mobiles. Cet article présentera 5 nouvelles API, dans l’espoir d’être utile à votre travail de développement.
1. API plein écran
Cette API permet aux développeurs d'exécuter par programmation des applications Web en plein écran, ce qui rend les applications Web davantage semblables à des applications natives.
// Retrouvez l'intégralité méthode d'écran adaptée au navigateur
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen(); else if(element.mozRequestFullScreen) {
element .mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Lancer le mode plein écran
launchFullScreen(document. documentElement); // la page entière
launchFullScreen(document.getElementById("videoElement")); // tout élément individuel
2. API de visibilité de page (API de visibilité de page)
Cette API peut être utilisée pour détecter la visibilité de la page pour l'utilisateur, c'est-à-dire renvoyer le changement de statut de la page ou de l'onglet actuellement parcouru par l'utilisateur.
// Définir les attributs cachés et événements de changement visibles Le nom et les attributs doivent être ajoutés avec le préfixe du navigateur
// puisque certains navigateurs n'offrent que la prise en charge du préfixe du fournisseur
var caché, état, visibilitéChange
if (typeof document.hidden != = "non défini") {
caché = "caché";
visibilitéChange = "visibilitéchange"
state = "visibilitéState"
} else if (typeof document.mozHidden !== "undéfini"; ) {
caché = "mozHidden";
visibilitéChange = "mozvisibilitychange";
state = "mozVisibilityState"
} else if (typeof document.msHidden !== "undefined") {
caché = "msHidden" ;
visibilitéChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
caché = " webkitHidden";
visibilitéChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Ajouter un écouteur pour le changement de titre
document.addEventListener(visibilityChange, function(e) {
// Démarrer ou arrêter le traitement du statut
}, false);
3. API getUserMedia
Cette API permet aux applications Web d'accéder à la caméra et au microphone sans utiliser de plug-ins.
// Définir l'écouteur d'événement
window.addEventListener("DOMContentLoaded", function() {
// Récupérer l'élément
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Erreur de capture vidéo : " , error .code);
};
// Définir l'écouteur vidéo
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video . src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // Préfixé par WebKit
navigator.webkitGetUserMedia(videoObj, function( stream ){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
},
}
}, false);
4. API de batterie
Il s'agit d'une API pour les applications d'appareils mobiles, principalement utilisée pour détecter les informations sur la batterie de l'appareil.