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, captionsOnFullscreen, captionsColorBackground, captionsColorFont, captionsRadius, 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.

captionsOnFullscreen

  • Typ: boolean
  • Domyślnie: false

Po włączeniu napisy włączają się automatycznie, gdy widz wchodzi w tryb pełnoekranowy. Po wyjściu wyłączają się ponownie, chyba że widz zmienił je podczas trybu pełnoekranowego. Jeśli napisy są już włączone, ta opcja nic nie robi.

Na iPhonie tryb pełnoekranowy używa natywnej prezentacji wideo Safari. Napisy pojawiają się wtedy przez natywny interfejs Apple zamiast niestandardowego overlaya odtwarzacza.

Ta opcja reaguje tylko na sterowanie pełnym ekranem odtwarzacza (lub natywny pełny ekran na iPhonie). Jeśli strona osadzająca przełączy samo <iframe> w tryb pełnoekranowy, napisy nie włączą się automatycznie — użyj wtedy metody Player.js enableTextTrack.

captionsColorBackground

  • Typ: string (hex lub rgba)
  • Domyślnie: rgba(0, 0, 0, 0.7)

Kolor tła cue napisów. Podaj wartości hex bez prefiksu # albo użyj formatu rgba(). Preferencje napisów przeglądarki nadal mają pierwszeństwo, jeśli są ustawione.

captionsColorFont

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

Kolor tekstu cue napisów. Podaj wartości hex bez prefiksu # albo użyj formatu rgba(). Preferencje napisów przeglądarki nadal mają pierwszeństwo, jeśli są ustawione.

captionsRadius

  • Typ: number
  • Domyślnie: 6

Promień zaokrąglenia (w pikselach) cue napisów. Ustaw 0 dla ostrych rogów.

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