Workshop - Iframe Code und Player Link verarbeiten

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

1. Wir liefernsenden Zugangsdatenden Player-Code per Mails aus.E-Mail

InSie dererhalten von uns eine E-Mail, die den vollständigen iFrame-Code für Ihren Player direkt im Text enthält.
Es wird keine ZIP-Datei mehr versendet und es müssen keine Dateien entpackt oder gespeichert werden.

Sie können sich auch in unsere Verwaltungsoberfläche einloggen. Dort generieren Sie per Knopfdruck einfach Ihren Player inkl. Codes und Zugangsdaten.

Öffnen Sie die E-Mail findenund kopieren Sie imden Anhangenthaltenen eineiFrame-Code ZIPvollständig Datei.in Oftmalsdie mit dem Name "Player-und-Einstellungen.zip".
Diese Datei wird geöffnet und der Inhalt abgespeichert, sodass Sie diesen wiederfinden.Zwischenablage.

2. DiePlayer-Code Player-Dateienverwenden

sind

Der zugesendete Code ist reines HTML Dateien.und

Siekann könnendirekt diesein Beispielsweiseden mitQuelltext demIhrer BrowserWebsite eingefügt werden, z. B. in ein CMS, einen HTML-Block oder einemeine 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.Template-Datei.

3. HTML HTML-Code verstehen:verstehen

Der iFrame iFrame-Code istbesteht ganzaus einfacheseinfachem, standardkonformem HTML. Jeder Webdesigner wirdkann Ihnendiesen dazubei HilfestellungBedarf leisten können.
Der Code ist einfach aufgebaut.anpassen.

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

EsDer gibtiFrame alsoenthält aktuell folgende Parameter (Nicht zu verwechseln mit den Parametern in der URL):Attribute:

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

anstelleAnstelle dervon XXXX würde hiersteht die vollständige URL zumzu Ihrem Live- oder Dateistream stehen.Dateistream. Diese URL könnenwird Sievon beiuns Bedarfbereits innerhalbkorrekt gesetzt und muss in der AnführungsstricheRegel anpassennicht undverändert ändern.
werden.

Weitere InfosInformationen zu Iframe inkl. BeispieleiFrames finden Sie auch aufbei w3schools auf– folgenderHTML Seite:iFrame https://www.w3schools.com/html/html_iframe.asp.

Wenn Sie einen Responsiveresponsiven Player erstellenverwenden möchten,möchten (optimiert für Mobilgeräte), müssen einigeBreite Werteund geändertHöhe angepasst bzw. per CSS gesteuert werden.
Mehr dazu unter   Responsive Player für Mobilgeräte  

Diesen Den per E-Mail erhaltenen iFrame-Code können Sie nundirekt ggf.in AnpassenIhre (Dateinamen,Website Livestream-Namen)einfügen und einfachbei aufBedarf Ihreranpassen Seite(z. einfügen.B. Größe oder Darstellungsoptionen).