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

Parametry są poniżej pogrupowane według przypadku użycia, z najczęstszymi grupami na początku. W każdej grupie parametry są wymienione alfabetycznie (z wyjątkiem preset, który jest pierwszy w sekcji Wygląd, ponieważ nadpisuje inne ustawienia wyglądu).

  • Odtwarzanie — autoplay, limitQuality, loop, muted
  • Sterowanie odtwarzaczem — airPlay, controls, fullscreen, googleCast, lang, pip, showTranscription
  • Wygląd — preset, colorBackground, colorPrimary, colorSecondary, fit, uiPadding, uiRadius
  • Napisy i język — captionsColorBackground, captionsColorFont, captionsOnFullscreen, captionsRadius, initCaptions

Odtwarzanie

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.

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.

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.

Sterowanie odtwarzaczem

airPlay

  • Typ: boolean
  • Domyślnie: false

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

controls

  • Typ: boolean
  • Domyślnie: true

Pokaż lub ukryj pasek sterowania.

fullscreen

  • Typ: boolean
  • Domyślnie: true

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

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

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.

showTranscription

  • Typ: boolean
  • Domyślnie: false

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

Wygląd

preset

  • Typ: string
  • Domyślnie: brak (używa presetu designu przypisanego do wideo w panelu administracyjnym, jeśli istnieje)

Zastosuj preset designu odtwarzacza po ID. Utwórz presety w panelu administracyjnym Ignite, a następnie przekaż tutaj ID presetu, aby użyć tego designu w tym osadzeniu.

To nadpisuje każdy preset designu już przypisany do wideo. Inne parametry URL (na przykład colorPrimary lub controls) nadal nadpisują poszczególne wartości z presetu, gdy je ustawisz.

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

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.

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.

uiPadding

  • Typ: number
  • Domyślnie: 12

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

uiRadius

  • Typ: number
  • Domyślnie: 10

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

Napisy i język

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.

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.

captionsRadius

  • Typ: number
  • Domyślnie: 6

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

initCaptions

  • Typ: boolean
  • Domyślnie: false

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

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