Anzeige
Anzeige
Ratgeber
Artikel merken

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.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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“.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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?

Anzeige
Anzeige

Weiterführende Links zum Thema JavaScript:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
18 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Leif Janzik

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

Antworten
Felix

Demo! Demo! Demo! ;)

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
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
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
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
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
Stephan Strittmatter

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

Antworten
christian

Demo pls!

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
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige