Workshop - Iframe Code und Player Link verarbeiten

Im folgenden Artikel zeigen wir Ihnen, wie Sie den Player Code für Ihren Account öffnen.

1. Wir liefern Zugangsdaten per Mails aus.

In der E-Mail finden Sie im Anhang eine ZIP Datei. Oftmals mit dem Name "Player-und-Einstellungen.zip".
Diese Datei wird geöffnet und der Inhalt abgespeichert, sodass Sie diesen wiederfinden.

2. Die Player-Dateien sind HTML Dateien.

Sie können diese Beispielsweise mit dem Browser oder einem HTML Editor öffnen.
Im folgenden finden Sie verschiedene Möglichkeiten dazu:

a) Über einen Browser:

Chrome:
- Rechtsklick auf die Datei
- Öffnen mit Chrome
- Drücken Sie Strg+U (Windows) oder ⌘-Option-U (Mac).

Firefox:
- Rechtsklick auf die Datei
- Öffnen mit Firefox
- neben dem Player Rechtsklick ins Weiße und "Seitenquelltext anzeigen" wählen.

Safari:
- Rechtsklick auf die Datei
- Öffnen mit Safari
- bei MacOS oben auf Safari > Einstellungen > Erweitert navigieren und den letzten Punkt "Menü Entwickler in der Menüleiste anzeigen" wählen.
- Einstellungen schließen und neben dem Player Rechtsklick ins Weiße und "Seitenquelltext einblenden" wählen.

Sie haben bei diesen drei exemplarischen Beispielen nun den Code für den Player gefunden. Dieser besteht im wesentlichen aus einem langen Link mit Parametern. Wie Sie dem Player weitere Funktionen hinzufügen können, finden Sie unter Erweiterte Playereinstellungen (Parameter)

b) Unser Windows:

Windows verfügt Editoren wie WordPad, Editor oder Microsoft Word welche den Code nicht korrekt verarbeiten können. Der Code würde in so einem Editor zerstört werden. Nutzen Sie einen CODE Editor wie beispielsweise den kostenlosen Notepad++ (https://notepad-plus-plus.org/downloads/)
Laden und installieren Sie das Programm, öffnen Sie die HTML Datei anschließend mit dem Editor.

c) Unter MacOS:

MacOS verfügt einen Editor wie TextEdit oder "Pages" welche den Code nicht korrekt verarbeiten können. Der Code würde in so einem Editor zerstört werden. Nutzen Sie einen Code Editor wie beispielsweise Sublime (https://www.sublimetext.com/)
Laden und installieren Sie das Programm, öffnen Sie die HTML Datei anschließend mit dem Editor.

3. HTML Code verstehen:

Der iFrame Code ist ganz einfaches HTML. Jeder Webdesigner wird Ihnen dazu Hilfestellung leisten können.
Der Code ist einfach aufgebaut.

<iframe width="845" height="475" style="border: none" allowfullscreen src="XXXX"></iframe>

Es gibt also aktuell folgende Parameter (Nicht zu verwechseln mit den Parametern in der URL):

width="845"
height="475"
style="border: none"
src="XXXX"

anstelle der XXXX würde hier die URL zum Live- oder Dateistream stehen. Diese URL können Sie bei Bedarf innerhalb der Anführungsstriche anpassen und ändern.
Weitere Infos zu Iframe inkl. Beispiele finden Sie auch auf w3schools auf folgender Seite: https://www.w3schools.com/html/html_iframe.asp

Wenn Sie einen Responsive Player erstellen möchten, müssen einige Werte geändert werden.
Mehr dazu unter Responsive Player für Mobilgeräte

Diesen Code können Sie nun ggf. Anpassen (Dateinamen, Livestream-Namen) und einfach auf Ihrer Seite einfügen.