Mit entsprechenden JavaScript-Methoden und -Attributen lässt sich der Vollbildmodus starten und beenden. Über eine CSS-Regel kann man das Aussehen der im Vollbild dargestellten Elemente beeinflussen.

Mit der Methode „requestFullScreen()“ lässt sich der Vollbildmodus starten. Allerdings verwenden derzeit Mozilla- und Webkit-Browser unterschiedliche Methoden, weshalb man alle drei Varianten berücksichtigen sollte:

function vollbild() {

  var element = document.getElementById("inhalt");

  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }

}

document.getElementById("vollbild_link").addEventListener("click", vollbild, false);

Im Beispiel wird ein Element über seine ID „inhalt“ im Vollbildmodus gestartet. Hinter der ID kann sich ein Bild oder Video verbergen. Es lassen aber auch mehrere in einem Container platzierte Elemente im Vollbild darstellen. Auch eine komplette Seite kann man über „document.getElementsByTagName(„body“)[0]“ in den Vollbildmodus bringen.

Einzelne Elemente werden automatisch auf die Gesamtbreite und -höhe des Bildschirms skaliert. Werden mehrere Elemente oder eine ganze Seite im Vollbild ausgeführt, findet keine Skalierung statt.

Beendet werden kann der Vollbildmodus mit der Escape-Taste. Es lassen sich aber auch individuelle Links dafür einrichten. Außerdem lässt sich abfragen, ob der Vollbildmodus aktiviert ist. Auf diese Weise kann man das Starten und Beenden des Vollbildmodus über denselben Link realisieren:

function vollbild() {

  var element = document.getElementById("inhalt");

  if (element.requestFullScreen) {

    if (!document.fullScreen) {
      element.requestFullscreen();
    } else {
      document.exitFullScreen();
    }

  } else if (element.mozRequestFullScreen) {

    if (!document.mozFullScreen) {
      element.mozRequestFullScreen();
    } else {
      document.mozCancelFullScreen();
    }

  } else if (element.webkitRequestFullScreen) {

    if (!document.webkitIsFullScreen) {
      element.webkitRequestFullScreen();
    } else {
      document.webkitCancelFullScreen();
    }

  }

}

document.getElementById("vollbild_link").addEventListener("click", vollbild, false);

Auch hier ist wieder zu beachten, dass Mozilla- und Webkit-Browser unterschiedliche Bezeichnungen der Methoden und Attribute verwenden. Teilweise besteht der Unterschied nicht nur darin, dass der Bezeichnung „moz“ beziehungsweise „webkit“ vorangestellt wird – siehe „mozFullScreen“ und „webkitIsFullScreen“.

Die Funktion fragt jeweils für den W3C-Standard und die Varianten für Mozilla und Webkit ab, ob das betsprechende Element im Vollbild ausgeführt wird oder nicht und startet beziehungsweise beendet den Vollbildmodus.

Mit dem Ereignis „fullscreenchange“ kann man auf das Starten und Beenden des Vollbildmodus reagieren. Gerade wenn der Modus über die Escape-Taste beendet wird, hat man mit dem Ereignis die Möglichkeit, auf das Beenden immer zu reagieren:

document.addEventListener("fullscreenchange", vollbild_verlassen, false);
document.addEventListener("mozfullscreenchange", vollbild_verlassen, false);
document.addEventListener("webkitfullscreenchange", vollbild_verlassen, false);

So lassen sich über die Funktion „vollbild_verlassen()“ zum Beispiel Informationen beim Starten oder Beenden ein- oder ausblenden oder Größen anpassen.

Über die CSS-Pseudoklasse „:fullscreen“ lassen sich speziell für den Vollbildmodus vorgesehene Eigenschaften definieren:

:fullscreen p, :-moz-full-screen p, :-webkit-fullscreen p {
  color: #ffffff;
}

Im Beispiel wird bei allen P-Elementen die Textfarbe in weiß geändert, insofern der Text im Vollbild dargestellt wird. Auch hier müssen Vendor-Angaben berücksichtigt werden. Auf diese Weise lassen sich alle im Vollbild dargestellten Inhalte anders gestalten.

Nutzt ihr die Fullscreen-API bereits? Wofür setzt ihr sie ein und welche Erfahrung habt ihr damit gemacht?

Weiterführende Links zum Thema JavaScript:

• Informationsseite zur Fullscreen-API
• JavaScript: Umfassender Zugriff auf DOM-Elemente mit „querySelector()“
• Experimenteller Firefox nutzt JavaScript für Gamepad-Spielsteuerung
• JavaScript: Mit File-API auf lokale Dateien zugreifen