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 verfügbaren Optionen sind in folgende Kategorien gegliedert:

  • Wiedergabe — Steuere, wie das Video abgespielt wird (autoplay, loop, muted, limitQuality)
  • Steuerung — Konfiguriere die Player-Oberfläche (controls, fullscreen, pip, airPlay, googleCast)
  • Untertitel und Sprache — Einstellungen zu Untertiteln und Lokalisierung (initCaptions, captionsOnFullscreen, captionsColorBackground, captionsColorFont, captionsRadius, showTranscription, lang)
  • Erscheinungsbild — Passe Look & Feel an (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Typ: boolean
  • Standard: true

Steuerleiste ein- oder ausblenden.

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.

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.

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.

initCaptions

  • Typ: boolean
  • Standard: false

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

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.

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.

captionsRadius

  • Typ: number
  • Standard: 6

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

showTranscription

  • Typ: boolean
  • Standard: false

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

uiRadius

  • Typ: number
  • Standard: 10

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

uiPadding

  • Typ: number
  • Standard: 12

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

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.

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)).

fullscreen

  • Typ: boolean
  • Standard: true

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

pip

  • Typ: boolean
  • Standard: false

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

airPlay

  • Typ: boolean
  • Standard: false

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

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).

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.

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