Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Gadgets & Lifestyle

Fullscreen-API: So funktioniert der Vollbildmodus mit JavaScript und CSS

Mit der neuen Fullscreen-API, die derzeit vom Chrome und dem aktuellen Firefox unterstützt wird, lassen sich Seiten und einzelne Elemente wie Filme und Bilder per JavaScript im Vollbildmodus darstellen. Gerade bei der Filmwiedergabe ist dies interessant.

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 JavaScript Vollbildmodus starten und beenden

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.

Auf Starten und Beenden des Vollbildmodus reagieren

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.

Stylesheet-Anpassungen für den Vollbildmodus

Ü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:

Bitte beachte unsere Community-Richtlinien

11 Reaktionen
mtemp

Der Vollständigkeit halber hier noch "mein" korrigiert Code, der mich glücklich macht... und alle anderen Opera-Liebhaber ;)

=======
function vollbild() {
var element = document.getElementById("mybody");

if (element.requestFullscreen) { //# Opera 12
console.info("Opera 12");
// if (!document.fullscreen) {
if (!document.fullscreenElement) {
element.requestFullscreen();
}
else {
document.exitFullscreen();
}
}
else if (element.mozRequestFullScreen) {
console.info("Mozilla");
if (!document.mozFullScreen) {
element.mozRequestFullScreen();
}
else {
document.mozCancelFullScreen();
}
} else if (element.webkitRequestFullScreen) { //# Opera 15, Chrome
console.info("Webkit (Opera 15, Chrome)");
if (!document.webkitIsFullScreen) {
element.webkitRequestFullScreen();
}
else {
document.webkitCancelFullScreen();
}
}
zentriereVertikal();
}
============

Antworten
mtemp

In dem Code befindet sich ein kleiner Fehler mit großer Auswirkung!!!

Bin Opera 12.x - User -- und switche nur in Problemfällen mittlerweile zuerst zu Opera 15+, dann zu Firefox (v.a. wegen Firebug) und probiere dann auch den IE sowie Chrome aus (von diesen die neuesten Versionen unter Windows 7)

Hab mich nämlich gewundert, wieso zB diese Gallerie
http://galleria.io/
auch in Opera 12 einen Vollbildmodus ermöglicht, über Euren Code jedoch nicht; trotz identischen Aussehens...

Lange, sehr lange nach dem Unterschied gesucht, nun endlich gefunden:
Bei der ersten Abfrage...

5. if (element.requestFullScreen) {
6.
7. if (!document.fullScreen) {
8. element.requestFullscreen();
9. } else {
10. document.exitFullScreen();
11. }

... muss "requestFullScreen" mit nur "einem CamelCase" geschrieben werden: nämlich "requestFullscreen"
Erst dann ist diese Abfrage auch für Opera 12 (und vermutlich kleiner) gültig.

# Zweiter Fehler!
Für Opera 12 muss die zweite IF-Abfrage nach dem Vollbildmodus nicht "document.fullScreen", sondern "document.fullscreenElement" lauten!
Denn die ersteres ergibt immer false, so dass ein Vollbildmodus in Opera 12 nicht darüber beendet werden würde (bzw. nur per Escape).

Erst wenn Ihr diese beiden Fehler berichtigt, dann funktionierts auch bei meinen Browsern -- also zumindest dort ;)

PS: Puh, Stunden später...

Antworten
christian

Demo pls!

Antworten
Stephan Strittmatter

@Tim: Das ist doch ein Feature, wo die anderen Browser sicher bald auch nachziehen werden, oder nicht?

Antworten
Tim

na super, schon wieder muss man Browserweichen einbauen, können die sich denn nie einigen, wie ich das hasse. Naja, zumindest gibts schon mal eine Möglichkeit, das ist besser als nichts

Antworten
Javascriptkiddie

Tolle Sache, bin mal gespannt wann die ersten Werbetreibenden auf die Idee kommen Werbeflächen oder geklickte Banner im Fullscreenmodus laufen zu lassen.

... und ESC wird unterdrückt, damit man aus dem Fullscreen bloß nicht mehr wieder rauskommt. Sollte in Javashit kein Prob sein.

Antworten
Jürgen Rabe

Ein paar nützliche Links hatte ich noch zusammengetragen als ich mich tiefer mit der Fullscreen API beschäftigt hatte :) So bietet sich ggf. die Verbindung einer Lightbox-Variante mit dem Fullscreen-Modus an... aber hier noch ein paar Links, vielleicht hilft ja noch jemanden...

Demo 1: http://robnyman.github.com/fullscreen/
Demo 2: http://html5-demos.appspot.com/static/fullscreen.html

Ergänzende Infos
https://wiki.mozilla.org/Gecko:FullScreenAPI
http://caniuse.com/fullscreen
https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Antworten
Stephan Strittmatter

Ja, bei den Ads wäre das echt lästig. Es sollte auf jeden Fall eine fest definierte Position zum "zu-X-en" geben, damit man diese nicht beliebig verstecken kann.

Ein Kollege von mir hat erst einen Blog-Beitrag über Videoplayer mit HTML5 verfasst. Für solche HTML5-Videoplayer ist natürlich der Fullscreen auch immer ein k.o.-Kriterium gegenüber den Flash-Playern gewesen.

Für Videos ist das auf jeden Fall ein tolles Feature!

Antworten
Michael - der aus Berlin

Tolle Sache, bin mal gespannt wann die ersten Werbetreibenden auf die Idee kommen Werbeflächen oder geklickte Banner im Fullscreenmodus laufen zu lassen.

Antworten
Felix

Demo! Demo! Demo! ;)

Antworten
Leif Janzik

freue mich schon, wenn die Fullscreen API auch auf Mobilen Geräten verfügbar ist

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst