Detaillierte Einführung in die HTML5-Vollbild-API_html5-Tutorialfähigkeiten

In immer mehr realen Webanwendungen wird JavaScript immer leistungsfähiger.

FullScreen API ist eine neue JavaScript-API, einfach und leistungsstark. FullScreen ermöglicht es uns, vom Benutzer programmgesteuert die Vollbildanzeige anzufordern, und wenn die Interaktion abgeschlossen ist, können wir den Vollbildstatus jederzeit verlassen.

Online-Demo: Vollbild-API-Beispiel

(In dieser Demo können Sie „Starten“, „Ausblenden“ und „Dump“ verwenden, um zugehörige Eigenschaften anzuzeigen, und Sie können Protokollinformationen über die Chrome-Konsole anzeigen.)

Vollbildmodus aktivieren

Die Vollbild-API-Methode requestFullscreen verwendet in einigen alten Browsern immer noch den Methodennamen mit einem Präfix, sodass möglicherweise eine Erkennung und Beurteilung erforderlich ist:
(Mit einem Präfix bedeutet dies, dass nicht jeder Browserkernel universell ist.)

Kopieren Sie den Code

Der Code lautet wie folgt:

// Finden Sie die unterstützten Methode und verwenden Sie das Element, das den Vollbildmodus erfordert. Rufen Sie
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() ;
}
}


// Vollbild in einem Browser starten, der Vollbild unterstützt
// Die gesamte Seite
launchFullScreen(document.documentElement); >// Ein Element
launchFullScreen( document.getElementById("videoElement"));
Nehmen Sie das DOM-Element, das im Vollbildmodus angezeigt werden muss, als Parameter. Der Aufruf dieser Methode kann dazu führen, dass das Fenster in den Vollbildmodus wechselt (der Browser selbst interagiert mit dem Benutzer). Wenn der Benutzer dies ablehnt, kann es zu verschiedenen Unvollständigkeiten im Vollbildmodus kommen.

Wenn der Benutzer dem Vollbildmodus zustimmt, werden die Symbolleiste und andere Browserkomponenten ausgeblendet, sodass sich Breite und Höhe des Dokumentrahmens über den gesamten Bildschirm erstrecken.

Vollbildmodus verlassen

Verwenden Sie die Methode „exitFullscreen“, um den Browser aus dem Vollbildmodus zu verlassen und zum ursprünglichen Layout zurückzukehren. Diese Methode unterstützt auch die Präfixmethode in einigen alten Browsern > Kopieren Sie den Code

Der Code lautet wie folgt:

// Vollbild beenden

function exitFullscreen() {

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

}

// Rufen Sie die Exit-Vollbildmethode auf
exitFullscreen();


Bitte beachten: Wird über das Dokumentobjekt aufgerufen – kein normales DOM-Element verwenden.


Vollbildeigenschaften und Ereignisse


Die schlechte Nachricht ist, dass Vollbildereignisse und -methoden bisher immer noch vorangestellt sind. Die gute Nachricht ist, dass sie bald von allen gängigen Browsern unterstützt werden.

1.document.fullscreenElement: Das Element, das sich derzeit im Vollbildmodus befindet.
2.document.fullscreenEnabled: Markiert, ob Vollbild derzeit verfügbar ist.

Beim Aufrufen/Verlassen des Vollbildmodus wird das Fullscreenchange-Ereignis ausgelöst:

Code kopieren

Der Code lautet wie folgt:

var fullscreenElement =

document.fullscreenEnabled
||. document.webkitFullscreenElement;

document.fullscreenEnabled

|| 🎜>Beim Initialisieren der Vollbildmethode können Sie erkennen, welches Ereignis überwacht werden muss.

Vollbild-CSS

Der Browser bietet einige nützliche Vollbild-CSS-Steuerungsregeln:





Kopieren Sie den Code

Der Code lautet wie folgt:

/* html */ :-webkit-full-screen { /* Properties */

}

:-moz-fullscreen {
/* Eigenschaften * /
}

:fullscreen { /* Eigenschaften */ }

/* tiefere Elemente */

: -webkit -full-screen video {
width: 100%;
height: 100%;


/* stylen des Hintergrunds */
::backdrop {
/* Eigenschaften */
}


In einigen Fällen erfordert WebKit eine spezielle Verarbeitung. Wenn Sie also mit Multimedia arbeiten, benötigen Sie möglicherweise den oben genannten Code.

Ich denke, die Fullscreen-API ist super einfach und super nützlich. Das erste Mal, dass ich diese API gesehen habe, war in einem Full-Client-Ego-Shooter-Spiel namens MDNs BananaBread-Demo, was wirklich eine großartige Möglichkeit ist um den Vollbildmodus zu nutzen.

Die Vollbild-API bietet eine Möglichkeit, in den Vollbildmodus zu wechseln und ihn zu verlassen, und stellt entsprechende Ereignisse bereit, um Änderungen im Vollbildstatus zu überwachen, sodass alle Aspekte kohärent sind.

Denken Sie einfach an diese tolle API – sie wird sich in der Zukunft bestimmt als nützlich erweisen!