Skip to Content
Videoplayer (Embed)Einrichtung

Der Ignite-Video-Embed-Player

Neben der Nutzung unserer umfangreichen API, um deinen eigenen Videoplayer zu bauen, ist die gängigste Art, Videos von Ignite einzubinden, unseren einbettbaren iFrame-Videoplayer zu verwenden.

1. Player-iFrame-URL

Du kannst entweder das HTML-iFrame-Snippet aus deiner Ignite-Admin-Oberfläche kopieren und einfügen oder die iFrame-URL selbst erstellen – nach einer einfachen Logik. Zuerst musst du deine Basis-Embed-URL zusammenbauen.

Deine Basis-URL:

https://[YOUR-IGNITE-DOMAIN]/player/index.html?id=[VIDEO-ID]

Beispiel:

https://play.ignite.video/player/index.html?id=6703e05251543798059613b3

2. Player konfigurieren

Du kannst das Verhalten und die Darstellung des Players steuern, indem du der Embed-URL Abfrageparameter hinzufügst.

Alle Parameter sind optional und haben sinnvolle Standardwerte. Du kannst mehrere Parameter kombinieren, indem du sie in deiner URL mit & trennst:

?id=[VIDEO-ID]&autoplay=true&muted=true&colorPrimary=FF5500

Die Parameter sind unten nach Anwendungsfall gruppiert, wobei die häufigsten Gruppen zuerst kommen. Innerhalb jeder Gruppe sind die Parameter alphabetisch sortiert (außer preset, das unter Erscheinungsbild an erster Stelle steht, weil es andere Design-Einstellungen überschreibt).

  • Wiedergabe — autoplay, limitQuality, loop, muted
  • Player-Steuerung — airPlay, controls, fullscreen, googleCast, lang, pip, showTranscription
  • Erscheinungsbild — preset, colorBackground, colorPrimary, colorSecondary, fit, uiPadding, uiRadius
  • Untertitel und Sprache — captionsColorBackground, captionsColorFont, captionsOnFullscreen, captionsRadius, initCaptions

Wiedergabe

autoplay

  • Typ: boolean
  • Standard: false

Video automatisch starten, sobald der Player geladen ist. Die meisten Browser verlangen für Autoplay, dass das Video muted ist.

limitQuality

  • Typ: string
  • Standard: 1080p
  • Werte: 2160p, 1080p, 720p, 540p, 360p, 240p

Begrenzt die maximal gestreamte Qualität des Videos. Hilfreich für Bandbreitenmanagement oder wenn du die Qualitätsoptionen für bestimmte Anwendungsfälle einschränken willst.

loop

  • Typ: boolean
  • Standard: false

Video in einer Schleife abspielen. Wenn aktiviert, startet das Video nach dem Ende automatisch von vorn.

muted

  • Typ: boolean
  • Standard: false

Video stumm starten. Das ist oft in Kombination mit autoplay nötig, wegen der Autoplay-Richtlinien der Browser.

Player-Steuerung

airPlay

  • Typ: boolean
  • Standard: false

Erlaubt das Streamen des Videos per AirPlay (Apple-Geräte).

controls

  • Typ: boolean
  • Standard: true

Steuerleiste ein- oder ausblenden.

fullscreen

  • Typ: boolean
  • Standard: true

Erlaubt Vollbildwiedergabe des Videos. Wenn deaktiviert, wird die Vollbild-Schaltfläche ausgeblendet.

googleCast

  • Typ: boolean
  • Standard: false

Erlaubt das Streamen des Videos per Google Cast (Chromecast).

lang

  • Typ: string
  • Standard: Browsereinstellung

Erzwingt die Sprache der Oberfläche und die Standard-Untertitelsprache. Verwende übliche Locale-Codes (z. B. en-US, de-DE, fr-FR).

pip

  • Typ: boolean
  • Standard: false

Erlaubt Picture-in-Picture. Wenn aktiviert, können Nutzer das Video in ein schwebendes Fenster lösen.

showTranscription

  • Typ: boolean
  • Standard: false

Zeigt in der Steuerleiste eine Schaltfläche für das Transkript, damit Nutzer das Video-Transkript einsehen können.

Erscheinungsbild

preset

  • Typ: string
  • Standard: keiner (nutzt das im Admin-UI dem Video zugewiesene Design-Preset, falls vorhanden)

Wende ein Player-Design-Preset per ID an. Erstelle Presets in der Ignite-Admin-UI und übergib hier die Preset-ID, um dieses Design für dieses Embed zu nutzen.

Das überschreibt jedes Design-Preset, das dem Video bereits zugewiesen ist. Andere URL-Parameter (zum Beispiel colorPrimary oder controls) überschreiben weiterhin einzelne Werte aus dem Preset, wenn du sie setzt.

colorBackground

  • Typ: string (hex oder rgba)
  • Standard: 000000

Hintergrundfarbe für UI-Elemente. Unterstützt Transparenz über das Format rgba() (z. B. rgba(0,0,0,0.25)).

colorPrimary

  • Typ: string (hex oder rgba)
  • Standard: D90B5A

Akzentfarbe für UI-Elemente. Wird für aktive Zustände, Fortschrittsbalken und interaktive Elemente genutzt. Hex-Werte ohne #-Präfix angeben oder das Format rgba() verwenden.

colorSecondary

  • Typ: string (hex oder rgba)
  • Standard: FFFFFF

Grundfarbe für UI-Elemente. Wird für Symbole und Text in der Steuerleiste genutzt.

fit

  • Typ: string
  • Standard: contain
  • Werte: contain, cover

Legt fest, wie das Video in den Player-Rahmen passt.

  • contain — Das Video wird so skaliert, dass es in den Player passt und das Seitenverhältnis erhalten bleibt. Kann zu Letterboxing führen.
  • cover — Das Video wird so skaliert, dass der gesamte Player-Bereich bedeckt wird und das Seitenverhältnis erhalten bleibt. Kann zu Beschnitt führen.

uiPadding

  • Typ: number
  • Standard: 12

Abstand (in Pixeln) zwischen den Player-Steuerelementen und den Rändern des Players.

uiRadius

  • Typ: number
  • Standard: 10

Eckenradius (in Pixeln) der Player-Steuerelemente. Auf 0 setzen für scharfe Ecken.

Untertitel und Sprache

captionsColorBackground

  • Typ: string (hex oder rgba)
  • Standard: rgba(0, 0, 0, 0.7)

Hintergrundfarbe der Caption-Cues. Gib Hex-Werte ohne #-Präfix an oder nutze das rgba()-Format. Browser-eigene Untertitel-Einstellungen haben weiterhin Vorrang, falls gesetzt.

captionsColorFont

  • Typ: string (hex oder rgba)
  • Standard: white

Textfarbe der Caption-Cues. Gib Hex-Werte ohne #-Präfix an oder nutze das rgba()-Format. Browser-eigene Untertitel-Einstellungen haben weiterhin Vorrang, falls gesetzt.

captionsOnFullscreen

  • Typ: boolean
  • Standard: false

Wenn aktiviert, werden Untertitel automatisch eingeschaltet, sobald der Zuschauer in den Vollbildmodus wechselt. Beim Verlassen werden sie wieder ausgeschaltet, sofern der Zuschauer die Untertitel im Vollbild nicht selbst geändert hat. Wenn Untertitel bereits aktiv sind, tut diese Option nichts.

Auf dem iPhone nutzt der Vollbildmodus die native Video-Darstellung von Safari. Untertitel erscheinen dann über Apples native Caption-UI statt über das Custom-Overlay des Players.

Diese Option reagiert nur auf die Vollbild-Steuerung des Players (oder nativen Vollbildmodus auf dem iPhone). Wenn die einbettende Seite das <iframe> selbst in den Vollbildmodus versetzt, werden Untertitel nicht automatisch aktiviert — nutze in dem Fall die Player.js-Methode enableTextTrack.

captionsRadius

  • Typ: number
  • Standard: 6

Border-Radius (in Pixeln) der Caption-Cues. Setze 0 für eckige Ecken.

initCaptions

  • Typ: boolean
  • Standard: false

Wenn aktiviert, sind die Untertitel beim Laden des Players standardmäßig sichtbar.

Beispiel-Abfrageparameter:

&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0

3. Das iFrame anlegen

Lege in deinem HTML ein iframe-Element an und setze das Attribut src auf die URL, die du im vorherigen Schritt erstellt hast. Wichtig ist, einige Styling-Attribute zu setzen, damit der Player so aussieht und sich so verhält, wie du es möchtest.

<iframe 
  id="ignite-video-player" 
  src="https://play.ignite.video/player/index.html?id=6703e05251543798059613b3&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0" 
  width="640" 
  height="360" 
  frameborder="0"  
  style="width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto;"
></iframe>

Live-Beispiel

Hier siehst du ein Live-Beispiel des Players:

EinführungPlayer-API