Fullscreen API

Die Fullscreen-API hat keine eigenen Schnittstellen. Stattdessen erweitert sie mehrere andere Schnittstellen, um die Methoden, Eigenschaften und Ereignishandler hinzuzufügen, die für die Bereitstellung der Vollbild-Funktionalität erforderlich sind. Diese sind in den folgenden Abschnitten aufgeführt.

Die Fullscreen-API fügt den Schnittstellen Document und Element Methoden hinzu, die das Ein- und Ausschalten des Vollbildmodus ermöglichen.

Document.exitFullscreen()

Fordert, dass der User-Agent vom Vollbildmodus in den Fenstermodus wechselt. Gibt ein Promise zurück, das aufgelöst wird, sobald der Vollbildmodus vollständig beendet wurde.

Element.requestFullscreen()

Fordert den User-Agent auf, das angegebene Element (und seine Nachfahren) in den Vollbildmodus zu versetzen und alle UI-Elemente des Browsers sowie alle anderen Anwendungen vom Bildschirm zu entfernen. Gibt ein Promise zurück, das aufgelöst wird, sobald der Vollbildmodus aktiviert wurde.

Document.fullscreenElement / ShadowRoot.fullscreenElement

Die fullscreenElement-Eigenschaft zeigt das Element an, das derzeit im Vollbildmodus im DOM (oder Shadow DOM) angezeigt wird. Wenn dies null ist, befindet sich das Dokument (oder Shadow DOM) nicht im Vollbildmodus.

Document.fullscreenEnabled

Die fullscreenEnabled-Eigenschaft zeigt an, ob es möglich ist, den Vollbildmodus zu aktivieren. Diese Eigenschaft ist false, wenn der Vollbildmodus aus irgendeinem Grund nicht verfügbar ist (z. B. wenn die "fullscreen"-Funktion nicht erlaubt ist oder der Vollbildmodus nicht unterstützt wird).

Document.fullscreen Veraltet

Ein boolescher Wert, der true ist, wenn das Dokument ein Element aktuell im Vollbildmodus anzeigt; andernfalls gibt er false zurück.

Hinweis: Verwenden Sie stattdessen die fullscreenElement-Eigenschaft im Document oder ShadowRoot; wenn sie nicht null ist, wird ein Element derzeit im Vollbildmodus angezeigt.

fullscreenchange

Wird einem Element gesendet, wenn es in den oder aus dem Vollbildmodus wechselt.

fullscreenerror

Wird an ein Element gesendet, wenn ein Fehler auftritt, während versucht wird, es in den oder aus dem Vollbildmodus zu wechseln.

Die Verfügbarkeit des Vollbildmodus kann mithilfe einer Berechtigungsrichtlinie gesteuert werden. Die Funktion für den Vollbildmodus wird durch den String "fullscreen" identifiziert, wobei der Standard-Wert der Zulassungsliste "self" ist, was bedeutet, dass der Vollbildmodus in Top-Level-Dokumentkontexten sowie in eingebetteten Browsing-Kontexten, die aus demselben Ursprung wie das oberste Dokument geladen werden, erlaubt ist.

Benutzer können den Vollbildmodus durch Drücken der ESC (oder F11)-Taste beenden, anstatt darauf zu warten, dass die Website oder App dies programmgesteuert tut. Stellen Sie sicher, dass Sie irgendwo in Ihrer Benutzeroberfläche geeignete UI-Elemente bereitstellen, die den Benutzer darüber informieren, dass diese Option verfügbar ist.

In diesem Beispiel wird ein Video auf einer Webseite präsentiert. Durch Drücken der Enter-Taste kann der Benutzer zwischen der Fenster- und der Vollbilddarstellung des Videos umschalten.

Live-Beispiel anzeigen

Abfragen der Enter-Taste

Wenn die Seite geladen wird, wird dieser Code ausgeführt, um einen Ereignis-Listener einzurichten, der auf die Enter-Taste wartet.

const video = document.getElementById("video");

// On pressing ENTER call toggleFullScreen method
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    toggleFullScreen(video);
  }
});

Umschalten des Vollbildmodus

Dieser Code wird von dem obigen Ereignishandler aufgerufen, wenn der Benutzer die Enter-Taste drückt.

function toggleFullScreen(video) {
  if (!document.fullscreenElement) {
    // If the document is not in full screen mode
    // make the video full screen
    video.requestFullscreen();
  } else {
    // Otherwise exit the full screen
    document.exitFullscreen?.();
  }
}

Zunächst wird der Wert des fullscreenElement-Attributs des document überprüft. Ist der Wert null, befindet sich das Dokument aktuell im Fenstermodus, sodass wir in den Vollbildmodus wechseln müssen; andernfalls ist es das Element, das aktuell im Vollbildmodus ist. Der Wechsel in den Vollbildmodus erfolgt durch Aufruf von Element.requestFullscreen() auf dem <video>-Element.

Falls der Vollbildmodus bereits aktiv ist (fullscreenElement ist nicht null), rufen wir exitFullscreen() auf das document auf, um den Vollbildmodus zu beenden.

• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen, ::backdrop
• allowfullscreen