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, fullscreenOnPlay, limitQuality, loop, muted
  • Player-Steuerung — airPlay, controls, fullscreen, googleCast, lang, pip, showAudioTracks, showSeekButtons, showTranscription
  • Erscheinungsbild — preset, aiContentLabel, aspectRatio, 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.

fullscreenOnPlay

  • Typ: boolean
  • Standard: false

Wenn aktiviert, wechselt der Player in den Vollbildmodus, sobald der Zuschauer die Wiedergabe per Klick oder Tippen startet. Nur der Start der Wiedergabe wechselt in den Vollbildmodus. Fortsetzen nach einer Pause oder Spulen tut das nicht. Wenn der Zuschauer das Video nach dem Ende erneut abspielt, wechselt der Player wieder in den Vollbildmodus.

Autoplay und die Player.js-Methode play wechseln nicht in den Vollbildmodus, weil Browser den Vollbildmodus nur nach einer Aktion des Zuschauers erlauben.

Diese Option ist unabhängig von fullscreen. fullscreen=false blendet nur den Vollbild-Button aus.

Das <iframe>-Element muss den Vollbildmodus mit allow="fullscreen" oder dem Attribut allowfullscreen erlauben. Der Embed-Code aus der Ignite-Admin-Oberfläche enthält das bereits.

Auf dem iPhone nutzt der Vollbildmodus die native Video-Darstellung von Safari. In einem iframe lädt der Player die Video-Metadaten, sobald der Player sichtbar wird, damit der Vollbildmodus beim ersten Tippen funktioniert.

fullscreenOnPlay ist nur ein URL-Parameter. Es wird nicht in einem Player-Preset und nicht im player.playerDesign des Videos gespeichert.

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.

showAudioTracks

  • Typ: boolean
  • Standard: false

Zeigt einen Button, mit dem Zuschauer zwischen alternativen Audio-Tracks wechseln können, zum Beispiel verschiedenen Sprachen oder einer Audiodeskription. Der Button bleibt ausgeblendet, wenn das Video nur einen Audio-Track hat. Aktiviere die Option immer dann, wenn ein Video eine Audiodeskription hat, damit Zuschauer sie auswählen können.

showSeekButtons

  • Typ: boolean
  • Standard: false

Zeigt neben dem Play-Button Buttons, die 10 Sekunden zurück oder vor springen.

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.

aiContentLabel

  • Typ: string
  • Standard: auto
  • Werte: auto, off, topLeft, topRight, bottomLeft, bottomRight

Position der KI-Kennzeichnung (EU-„AI“-Icon plus ein kurzes lokalisiertes Wort wie „Generiert“ oder „Bearbeitet“; die vollständige Formulierung „KI-generiert“ / „KI-bearbeitet“ ist der barrierefreie Name und Tooltip). Die Kennzeichnung wird nur für Videos oder Live-Events angezeigt, die in Ignite als KI-Inhalt markiert sind (Feld „KI-Inhalt“ = vollständig KI-generiert oder teilweise KI-bearbeitet); unmarkierte Inhalte zeigen sie nie. auto platziert sie oben rechts. off blendet sie aus; du bleibst für die Einhaltung von Vorschriften wie dem EU AI Act (Art. 50) verantwortlich. Die Kennzeichnung ist ein Player-Overlay und wird nicht in heruntergeladene Dateien eingebrannt.

aspectRatio

  • Typ: string
  • Standard: original
  • Werte: original, 16/9, 9/16, responsive, 4/3, 1/1, 3/4, 4/5

Das ist kein URL-Parameter. Es wird im Player-Design und in einem Player-Preset gespeichert. Der Embed-Code aus der Ignite-Admin-Oberfläche nutzt es, um die Größe des iframe festzulegen. original behält das Seitenverhältnis des Videos.

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