Skip to Content
Odtwarzacz wideo (embed)Konfiguracja

Osadzany odtwarzacz Ignite Video

Oprócz korzystania z naszego rozbudowanego API do budowy własnego odtwarzacza wideo, najpopularniejszym sposobem integracji filmów z Ignite jest użycie osadzanego odtwarzacza w ramce iframe.

1. Adres URL ramki iframe odtwarzacza

Możesz skopiować/wkleić fragment HTML z ramką iframe z panelu administracyjnego Ignite lub samodzielnie skonstruować adres URL, stosując prostą logikę. Najpierw musisz zbudować bazowy adres URL do osadzania.

Twój bazowy URL:

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

Przykład:

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

2. Konfiguracja odtwarzacza

Możesz skonfigurować zachowanie i wygląd odtwarzacza, dodając parametry zapytania do adresu URL osadzania.

Wszystkie parametry są opcjonalne i mają sensowne wartości domyślne. Możesz łączyć wiele parametrów, oddzielając je znakiem & w adresie URL:

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

Dostępne opcje podzielone są na następujące kategorie:

  • Odtwarzanie — Kontroluj sposób odtwarzania wideo (autoplay, loop, muted, limitQuality)
  • Elementy sterujące — Konfiguruj interfejs odtwarzacza (controls, fullscreen, pip, airPlay, googleCast)
  • Napisy i język — Ustawienia napisów i lokalizacji (initCaptions, showTranscription, lang)
  • Wygląd — Dostosuj wygląd i styl (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Typ: boolean
  • Domyślnie: true

Pokaż lub ukryj pasek sterowania.

loop

  • Typ: boolean
  • Domyślnie: false

Zapętl odtwarzanie wideo. Po włączeniu film automatycznie rozpocznie się od początku po zakończeniu.

muted

  • Typ: boolean
  • Domyślnie: false

Rozpocznij odtwarzanie wideo z wyciszonym dźwiękiem. Jest to często wymagane w połączeniu z autoplay ze względu na polityki autoodtwarzania przeglądarek.

autoplay

  • Typ: boolean
  • Domyślnie: false

Rozpocznij odtwarzanie wideo automatycznie po załadowaniu odtwarzacza. Pamiętaj, że większość przeglądarek wymaga, aby wideo było wyciszone (muted), aby autoodtwarzanie zadziałało.

fit

  • Typ: string
  • Domyślnie: contain
  • Wartości: contain, cover

Zmień sposób dopasowania wideo do ramki odtwarzacza.

  • contain — Wideo jest skalowane, aby zmieścić się w odtwarzaczu z zachowaniem proporcji. Mogą pojawić się czarne pasy.
  • cover — Wideo jest skalowane, aby pokryć cały obszar odtwarzacza z zachowaniem proporcji. Część obrazu może zostać przycięta.

initCaptions

  • Typ: boolean
  • Domyślnie: false

Po włączeniu napisy będą domyślnie widoczne po załadowaniu odtwarzacza.

showTranscription

  • Typ: boolean
  • Domyślnie: false

Pokazuje przycisk transkrypcji na pasku sterowania, umożliwiając użytkownikom przeglądanie transkrypcji wideo.

uiRadius

  • Typ: number
  • Domyślnie: 10

Promień zaokrąglenia (w pikselach) elementów sterujących odtwarzacza. Ustaw na 0, aby uzyskać ostre rogi.

uiPadding

  • Typ: number
  • Domyślnie: 12

Odstęp (w pikselach) od elementów sterujących do krawędzi odtwarzacza.

colorPrimary

  • Typ: string (hex lub rgba)
  • Domyślnie: D90B5A

Kolor podświetlenia elementów UI. Używany dla stanów aktywnych, pasków postępu i elementów interaktywnych. Podaj wartości hex bez prefiksu # lub użyj formatu rgba().

colorSecondary

  • Typ: string (hex lub rgba)
  • Domyślnie: FFFFFF

Bazowy kolor elementów UI. Używany dla ikon i tekstu na pasku sterowania.

colorBackground

  • Typ: string (hex lub rgba)
  • Domyślnie: 000000

Kolor tła elementów UI. Obsługuje przezroczystość za pomocą formatu rgba() (np. rgba(0,0,0,0.25)).

fullscreen

  • Typ: boolean
  • Domyślnie: true

Pozwól na odtwarzanie wideo w trybie pełnoekranowym. Po wyłączeniu przycisk pełnego ekranu zostanie ukryty.

pip

  • Typ: boolean
  • Domyślnie: false

Pozwól użytkownikom korzystać z trybu obraz w obrazie (Picture-in-Picture). Po włączeniu użytkownicy mogą wyciągnąć wideo do pływającego okna.

airPlay

  • Typ: boolean
  • Domyślnie: false

Pozwól użytkownikom przesyłać wideo przez AirPlay (urządzenia Apple).

googleCast

  • Typ: boolean
  • Domyślnie: false

Pozwól użytkownikom przesyłać wideo przez Google Cast (Chromecast).

lang

  • Typ: string
  • Domyślnie: Ustawienie przeglądarki

Wymuś język interfejsu i domyślny język napisów. Użyj standardowych kodów lokalizacji (np. en-US, de-DE, fr-FR).

limitQuality

  • Typ: string
  • Domyślnie: 1080p
  • Wartości: 2160p, 1080p, 720p, 540p, 360p, 240p

Ogranicza maksymalną jakość strumieniowania wideo. Przydatne do zarządzania przepustowością lub gdy chcesz ograniczyć opcje jakości w określonych przypadkach użycia.

Przykładowe parametry zapytania:

&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. Tworzenie ramki iframe

Utwórz element iframe w swoim HTML i ustaw atrybut src na adres URL skonstruowany w poprzednim kroku. Ważne jest ustawienie odpowiednich atrybutów stylów, aby odtwarzacz wyglądał i zachowywał się zgodnie z twoimi oczekiwaniami.

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

Przykład na żywo

Oto przykład działającego odtwarzacza:

WprowadzenieAPI odtwarzacza