1. Offline Test

Für einen schnellen Test des Web Players, vor dem Hochladen auf einen eigenen Webserver, kann per Firefox die im Ordner enthaltene index.html geöffnet werden. Um auf Safari offline testen zu können, muss in den Safari Optionen unter Preferences -> Advanced -> “Show Develop menu in menu bar” ein Häkchen gesetzt und anschließend im Safari Menü: Develop -> Disable Local File Restrictions aktiviert werden.

2. Unterstützte Browser

Eine Übersicht der unterstützten Browser auf Desktop und Mobile findet sich im Ordner unter “webplayer_browser_support_matrix/index.html”

3. Hosting

Um den TigerCreate 2 Web Player in eine bereits bestehende Website einzubinden oder als eigenständige Webadresse anzugeben muss dieser zunächst gehostet werden.
Dazu muss der enthaltene Ordner mit dem Namen bzw. Präfix "TC2WebPlayer" auf einen eigenen Webserver hochgeladen werden. 

4. Einbindung

Ist der erste Schritt "Hosting" abgeschlossen kann der Web Player direkt aufgerufen, als Link referenziert oder in eine bestehende Website über einen iFrame eingebunden werden.

4.1 Direkter Aufruf des Web Players

Der Web Player kann auch ohne eine eigene Website direkt aufgerufen und gestartet werden. Dazu muss lediglich die Adresse der im Ordner enthaltenen index.html in einem Web Browser geöffnet werden. Diese verweist auf die erste Szene des exportierten Projekts. 

4.2 Einbindung als Link

Soll der Web Player als Link in eine bestehende Website eingebunden werden muss wie auch beim direkten Aufruf die im Ordner enthaltene index.html referenziert werden. 

Beispiel: 
<a href=”meine-domain.com/TC2WebPlayer/index.html”></a>

4.3 Einbindung als iFrame

Die im Ordner enthaltene demo.html zeigt, wie eine Einbindung über einen iFrame in eine bereits bestehende Website funktioniert.
Dazu einfach den rot eingefärbten HTML code kopieren, an der gewünschten Stelle einfügen und die Webadresse unter src=”TC2WebPlayer...” mit der des eigenen Webservers vervollständigen. 
Der umfassende <div> Container sorgt dafür, dass für das exportierte Projekt stets das korrekte Seitenverhältnis gewahrt wird. 
Die Größe dieses iFrame + div Konstrukts richtet sich nach der Größe des darüber liegenden Elements.
Es wird empfohlen sowohl für den Webserver als auch für den eingebundenen iFrame “https” zu verwenden, da ansonsten verschiedene Probleme auftreten können wie im weiteren Verlauf beschrieben.

4.4 Einbindung als iFrame in Wordpress

In Wordpress lassen sich standardmäßig keine iFrames per HTML einbinden. 
Daher muss zunächst ein Plugin installiert werden, das diese Funktionalität bietet.
An dieser Stelle wird das Plugin “iframe” von webvitaly (Version 4.3) empfohlen.
Anschließend können iFrames mit eckigen Klammern im Visual Editor eingebunden werden:
[iframe src="https://meine-domain.com/TC2WebPlayer/index.html" width="100%" allowfullscreen="true"]

Soll der iFrame schmaler als das darüber liegende Element sein kann für "width" auch ein geringerer Wert gewählt werden.
Werden Wordpress-Seite sowie der Inhalt des iFrames über die selbe Domain angesprochen werden hierbei auch die korrekten Seitenverhältnisse gewahrt. Also eine Veranderung des "width" Parameters hat eine Veränderung der Höhe des iFrames zur Folge.
Werden beide über unterschiedliche Domains angesprochen, muss diese Anpassung manuell erfolgen. Hierbei müssen zur Wahrung korrekter Seitenverhältnisse die beiden Parameter width und height explizit gesetzt werden. 

Hat der iFrame nun eine geringere Breite als das darüber liegende Element und soll zentriert werden, kann dies ganz einfach über den Visual Editor geschehen, indem der iFrame code markiert und der Text auf "Align Center" gestellt wird.

4.5 Starten des Web Players mit einer bestimmten Sprache

Wenn das exportierte Projekt mehrere Sprachen unterstützt kann eine der Sprachen explizit als Standard gewählt werden.
Hierbei muss der Aufruf des Web Players einen "language" Parameter enthalten wie im folgenden Beispiel:
https://meine-domain.com/TC2WebPlayer/index.html?language=EN

5. Bekannte Probleme und Lösungsvorschläge

Web Player oder Teile laden nicht:
	Sollte der Web Player nicht wie erwartet laden kann in der Entwicklerkonsole des jeweiligen Browsers nachgesehen werden, ob es eine Fehlermeldung gibt.

	    -    Safari “[blocked] The page at about:blank was not allowed to display insecure content 	from http/mydomain.com/TC2WebPlayer”
	    -    Chrome “Mixed Content: The page at 'https://another-domain.net/' was loaded over HTTPS, but requested an insecure resource 'http/my-domain.com/TC2WebPlayer'. This request has been blocked; the content must be served over HTTPS.”
        -    Chrome “net::ERR_INSECURE_RESPONSE”

	In diesem Fall wurde versucht, den iFrame in eine Seite einzubinden, die ein gültiges SSL Zertifikat liefert. Der Webserver selbst, der über den iFrame angesprochen wird liefert allerdings kein gültiges SSL Zertifikat.
	Die Lösung wäre in diesem Fall: ein gültiges SSL Zertifikat für den Webserver besorgen, der den Web Player hostet und diesen im iFrame auch über https zu referenzieren.

Probleme mit dem Vollbildmodus:
	-	Elemente der Seite tauchen über dem Vollbild auf
	-> dieses Problem ist im Zusammenhang mit Safari 11 bekannt: hier wird dem iframe 	bzw. seinem Dokument ein CSS z-Index von 2147483647 zugewiesen (maximaler Wert 	einer signed 32 Bit Integer Variable)
	tauchen Elemente darüber auf kann es sein, dass diese einen ungewöhnlich hohen CSS z-index haben. Die Lösung wäre, den CSS z-Index des darüber liegenden Elements zu 	verringern (z.B. auf 2147483646)

	-	Bereiche der Szene reagieren nicht auf Klicks
	-> falls dieses Problem auf Safari auftritt kann ein Platzhalter unter dem eingebundenen iframe Abhilfe schaffen. Falls dies kein passender Workaround für Sie ist kontaktieren Sie bitte unseren Support