Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die Vollbild-API bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.

Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe Vendor Präfixe für Unterschiede zwischen Präfixen und Namen. 

Für eine universelle Lösung des Problems siehe Fscreen.

Aktivieren des Vollbildmodus

Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein <video>), wir der Vollbildmodus einfach durch den Aufruf der Element.requestFullscreen()-Methode gestartet.

Nehmen wir dieses <video>-Element als Beispiel:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} 

Anzeige-Schwierigkeiten

An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "width: 100%; height: 100%". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "width: 100%; height: 100%;"-CSS-Regel zum entsprechenden Element hinzufügen:

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.

Benachrichtigung

Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das document, welches das entsprechende Element enthält ein fullscreenchange-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das document wiederum ein fullscreenchange-Event. Beachten Sie jedoch, dass das fullscreenchange-Event selbst keine Informationen darüber bereitstellt, ob das document in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut fullscreenElement, des document nicht null ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.

Wenn die Vollbild-Anfrage scheitert

Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. <iframe>-Elements etwa haben das allowfullscreen-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein mozfullscreenerror-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.

Hinweis: Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. 

Verlassen des Vollbildmodus

Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe Things your users want to know. Der Vollbildmodus kann aber auch programmatisch mithilfe der  Document.exitFullscreen()-Methode beendet werden.

Weitere Informationen

Das document hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:

fullscreenElement
Das fullscreenElement-Attribut gibt das element an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht null ist, befindet sich das document im Vollbildmodus. Sonst, wenn dieses Attribut null ist, befindet sich das Dokument nicht im Vollbildmodus.
fullscreenEnabled
Das fullscreenEnabled-Attribut gibt an, ob das document aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.

Was die Nutzer wissen wollen

Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit ESC (oder F11) verlassen können.

Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  Alt+Tab) auch den Vollbildmodus.

Beispiel

In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von Return oder Enter kann der Nutzer den Vollbildmodus des Videos umschalten.

Live-Beispiel ansehen

Watching for the Enter key

When the page is loaded, this code is run to set up an event listener to watch for the Enter key.

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

Toggling fullscreen mode

This code is called when the user hits the Enter key, as seen above.

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

This starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both moz, ms, or webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling element.requestFullscreen().

If fullscreen mode is already active (fullscreenElement is non-null), we call document.exitFullscreen().

Vendor Präfixe

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen). Here is the table summarizing the prefixes and name differences between them:

Standard Blink (Chrome & Opera) Gecko (Firefox) Internet Explorer 11 Edge Safari (WebKit)
Document.fullscreen webkitIsFullScreen mozFullScreen - webkitIsFullScreen webkitIsFullScreen
Document.fullscreenEnabled webkitFullscreenEnabled mozFullScreenEnabled msFullscreenEnabled webkitFullscreenEnabled webkitFullscreenEnabled
Document.fullscreenElement webkitFullscreenElement mozFullScreenElement msFullscreenElement webkitFullscreenElement webkitFullscreenElement
Document.onfullscreenchange onwebkitfullscreenchange onmozfullscreenchange MSFullscreenChange onwebkitfullscreenchange onwebkitfullscreenchange
Document.onfullscreenerror onwebkitfullscreenerror onmozfullscreenerror MSFullscreenError onwebkitfullscreenerror onwebkitfullscreenerror
Document.exitFullscreen() webkitExitFullscreen() mozCancelFullScreen() msExitFullscreen() webkitExitFullscreen() webkitExitFullscreen()
Element.requestFullscreen() webkitRequestFullscreen() mozRequestFullScreen() msRequestFullscreen() webkitRequestFullscreen() webkitRequestFullscreen()

Spezifikationen

Specification Status Comment
Fullscreen API Lebender Standard Initial version.

Browser Kompatibilität

All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of requestFullscreen(), there is MozRequestFullScreen().

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15 -webkit (Ja) 9.0 (9.0) -moz
47 (47) (behind full-screen-api.unprefix.enabled)
11 -ms 12.10 5.0 -webkit
fullscreenEnabled 20 -webkit (Ja) 10.0 (10.0) -moz
47 (47) (behind full-screen-api.unprefix.enabled)
11 -ms 12.10 5.1 -webkit
Feature Android Chrome Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 28 -webkit (Ja) 9.0 (9.0)-moz
47.0 (47) (behind full-screen-api.unprefix.enabled)
? ? ?
fullscreenEnabled ? 28 -webkit (Ja) 10.0 (10.0) moz
47.0 (47) (behind full-screen-api.unprefix.enabled)
? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: wbamberg, lazercaveman, Johann150, axelrindle
Zuletzt aktualisiert von: wbamberg,