5 leistungsstarke HTML5-API-Funktionsempfehlungen_HTML5-Tutorial-Fähigkeiten

HTML5 bietet einige sehr leistungsstarke JavaScript- und HTML-APIs, die Entwicklern beim Erstellen beeindruckender Desktop- und Mobilanwendungen helfen. In diesem Artikel werden fünf neue APIs vorgestellt, die Ihnen bei Ihrer Entwicklungsarbeit hilfreich sein sollen.

1. Vollbild-API

Mit dieser API können Entwickler Webanwendungen programmgesteuert im Vollbildmodus ausführen, wodurch Webanwendungen eher nativen Anwendungen ähneln.

Kopieren Sie den Code

Der Code lautet wie folgt:

// Finden Sie den vollständigen Code Für den Browser geeignete Bildschirmmethode
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen(); else if(element.mozRequestFullScreen) {
element .mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Vollbildmodus starten
launchFullScreen(document. documentElement); // die gesamte Seite
launchFullScreen(document.getElementById("videoElement") // jedes einzelne Element

　2. Seitensichtbarkeits-API (Seitensichtbarkeits-API)

Diese API kann verwendet werden, um die Sichtbarkeit der Seite für den Benutzer zu erkennen, d. h. um die Statusänderung der Seite oder Registerkarte zurückzugeben, die der Benutzer aktuell durchsucht.

Code kopierenDer Code lautet wie folgt:

// Versteckte Attribute festlegen und sichtbare Änderungsereignisse Der Name und die Attribute müssen mit dem Browser-Präfix
// hinzugefügt werden, da einige Browser nur Unterstützung mit Herstellerpräfix bieten
var versteckt, Zustand, SichtbarkeitÄnderung;
if (typeof document.hidden != = „undefiniert“) {
versteckt = „versteckt“;
sichtbarkeitChange = „visibilitychange“;
state = „visibilityState“; ) {
Hidden = "mozHidden";
perspective = "mozvisibilitychange";
state = "mozVisibilityState"; > versteckt = "msHidden" ;
sichtbarkeit = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefiniert") {
versteckt = " webkitHidden";
VisibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Listener für Titeländerung hinzufügen
document.addEventListener(visibilityChange, function(e) {
// Statusverarbeitung starten oder stoppen
}, false);




　3. getUserMedia API

Diese API ermöglicht Webanwendungen den Zugriff auf Kamera und Mikrofon, ohne Plug-Ins zu verwenden.

Code kopieren

Der Code lautet wie folgt:// Event-Listener festlegen

window.addEventListener("DOMContentLoaded", function() {

// Element abrufen

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Videoaufnahmefehler: " , error .code);
};
// Video-Listener festlegen
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video . src = stream;
video.play();
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia( stream ){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, false);




　4. Batterie-API


Dies ist eine API für Mobilgeräteanwendungen, die hauptsächlich zur Erkennung von Gerätebatterieinformationen verwendet wird.

Code kopieren

Der Code lautet wie folgt:

var batterie = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// Propriétés de la batterie
console.warn("Charge de la batterie : ", batterie.charge); true
console.warn("Niveau de batterie : ", Battery.level); // 0.58
console.warn("Temps de décharge de la batterie : ", Battery.dischargeTime);// Ajouter un écouteur d'événement
🎜>battery.addEventListener("chargerchange", function(e) {
console.warn("Changement de charge de la batterie : ", batterie.charge);
}, false);

5. Prélecture de liens

Préchargez le contenu de la page Web pour offrir aux téléspectateurs une expérience de navigation fluide.

Copier le codeLe code est le suivant :

Voici ces 5 nouvelles API. Les comprenez-vous ? Si vous avez des questions, veuillez laisser un message. Discutons-en ensemble et progressons ensemble.