Obwohl ich ab und and die Browser-Fullscreen-APIs in einigen meiner Projekte verwendet habe, waren mir einige Details noch nicht bekannt.
Deshalb habe ich im Folgenden einige nützliche Code-Schnipsel zusammengestellt.
Geprefixte Methoden und Objekte
Laut caniuse ist die Vollbild-Schnittstelle in Safari noch geprefixed. Hier muss jeweils im Methodennamen noch webkit vornangestellt werden; so muss man beispielsweise in Safari: element.webkitRequestFullscreen() statt element.requestFullscreen() aufrufen.
Ich verwende folgende Hilfsfunkiton, um in jedem Browser die richtige Methode aufzurufen, bzw. auf das richtige Objekt zuzugreifen:
Element im Vollbildmodus öffnen
Mit der Methode requestFullscreen() kann man ein Element im Vollbildmodus öffnen.
Die Methode hat einen optionalen options-Parameter, mit dem man einstellen kann ob Navigationselemente des Browsers angezeigt werden oder nicht (Ausnahmen: Firefox und Safari).
Die Methode gibt ein Promise zurück, so dass man auf die Umschaltung in den Vollbildmodus reagieren kann, um z.B. nach der Vollbild-Umschaltung Code auszuführen (Ausnahme: Safari).
Vollbildmodus schließen
Die Methode document.exitFullscreen() schließt den Vollbildmodus. Wichtig hier: exitFullscreen ist eine Methode des document-Objekts, nicht des element Objekts.
Auch document.exitFullscreen() gibt ein Promise zurück (Ausnahme: Safari).
Vollbildmodus erkennen
Das Objekt document.fullscreenElement enthält eine Referenz auf das Element, das im Vollbildmodus geöffnet wurde. In Safari ist dieses Objekt geprefixed: document.webkitFullscreenElement (Ausnahme Safari auf dem iPhone: hier existiert das Objekt nicht)
Events
Beim Öffnen oder Schließen des Vollbildmodus, wird jeweils das fullscreenchange-Event ausgelöst. In Safari ist der Event-Name mit einem Prefix versehen und heißt webkitfullscreenchange.
Beispiel
Im folgenden Beispiel habe ich alle Code-Snippets eingebaut