Fullscreen API – HTML5 APIs

Fullscreen API von HTML5

Das Fullscreen API erlaubt es einzelne Elemente im Vollbild anzuzeigen. Dabei ist es egal, ob man ein Bild, Video oder sogar einen Container mit einer ganzen Anwendung (z.B. ein Spiel) nimmt. Der Vollbild-Modus kann in den meisten Browsern mit F11 gestartet werden. Wenn der Modus eingeschaltet wird, erhält der Benutzer eine Abfrage, ob dieses Verhalten gewünscht ist. Gleichzeitig wird man darüber informiert, dass man den Vollbild-Modus mit der ESC-Taster verlassen kann.

Browserunterstützung

Das API wird in allen modernen Desktop Browsern, inklusive Internet Explorer 11, unterstützt. (Firefox >= 10, Chrome >= 20, Opera >= 12.10, Safari >= 5.1) Bei mobilen Browsern sieht es ganz anders aus. Wenige (Chrome >= 28, Firefox >= 10) unterstützen das Fullscreen API. Das ist aber auch nicht weiter tragisch, da die meisten mobilen Browser sowieso im Vollbild laufen.

Alle Methoden der Fullscreen API sind im Moment noch mit Vendor-Präfixen versehen.

Mit dem folgendem Code lässt sich herausfinden, ob der Browser das Fullscreen API unterstützt:

Vollbild Modus aufrufen

Mit der Methode requestFullscreen kann man das gewünschte Element in Vollbild anzeigen lassen:

 Vollbild Modus verlassen

Mit der Methode exitFullscreen wird der Vollbild Modus beendet. Dabei ist wichtig anzumerken, dass exitFullscreen auf das document Objekt anwenden lässt. Eine Übergabe des Elements ist nicht notwendig.

Eigenschaften und Events

Auch die Eigenschaften des APIs sind mit Vendor-Präfixen versehen.

  • document.fullscreenEnabled – Diese Eigenschaft gibt true zurück, wenn das API verfügbar ist.
  • document.fullscreenElement – Diese Eigenschaft gibt das Element zurück, das gerade im Vollbild angezeigt wird.
  • fullscreenchange – Dieses Event wird gefeuert, wenn der Vollbild-Modus gestartet oder verlassen wird.
  • fullscreenerror – Diese Event wird gefeuert, wenn ein Element nicht im Vollbild angezeigt werden kann. Zum Beispiel ein IFrame ohne ein allowfullscreen Attribut.

CSS

Mit CSS kann man die Optik ein wenig verändern. Dabei stehen einem die folgenden Selektoren zur Verfügung.

  • :fullscreen – Mit diesem Selektor kann das Aussehen des Elements, im Vollbild, verändert werden.
  • ::backdrop – Mit diesem Selektor kann der Hintergrund im Vollbild verändert werden.

Fazit

Durch die vielen HTML5 APIs (z.B. Battery Status APIPage Visibility API, Vibration API) wird die tägliche Arbeit immer abwechslungsreicher und macht somit deutlich mehr Spaß. Die Kunden profitieren von schnelleren Umsetzungszeiten und die Entwickler vom wartbaren Code.

Ich wünsche euch viel Spaß beim Ausprobieren und hinterlasst gerne eure Meinungen in den Kommentaren.

ALL-INKL.COM