Skip to Content
Lettore video (embed)Configurazione

Il player video incorporato Ignite

Oltre a usare la nostra API estesa per costruire il tuo player video, il modo più comune per integrare i video da Ignite è usare il nostro player video iFrame incorporabile.

1. URL iframe del player

Puoi copiare e incollare lo snippet HTML dell’iframe dalla tua interfaccia di amministrazione Ignite oppure creare tu stesso l’URL dell’iframe seguendo una logica semplice. Per prima cosa devi costruire l’URL base di incorporamento.

Il tuo URL base:

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

Esempio:

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

2. Configurare il player

Puoi configurare il comportamento e l’aspetto del player aggiungendo parametri di query all’URL di incorporamento.

Tutti i parametri sono facoltativi e hanno valori predefiniti sensati. Puoi combinare più parametri separandoli con & nel tuo URL:

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

Le opzioni disponibili sono organizzate nelle seguenti categorie:

  • Riproduzione — Controlla come viene riprodotto il video (autoplay, loop, muted, limitQuality)
  • Controlli — Configura l’interfaccia del player (controls, fullscreen, pip, airPlay, googleCast)
  • Sottotitoli e lingua — Impostazioni per i sottotitoli e la localizzazione (initCaptions, showTranscription, lang)
  • Aspetto — Personalizza look & feel (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Type: boolean
  • Default: true

Mostra o nascondi la barra dei controlli.

loop

  • Type: boolean
  • Default: false

Ripeti la riproduzione del video. Se abilitata, il video ripartirà automaticamente dall’inizio al termine.

muted

  • Type: boolean
  • Default: false

Avvia il video senza audio. Spesso è necessario insieme a autoplay a causa delle policy di autoplay del browser.

autoplay

  • Type: boolean
  • Default: false

Avvia il video automaticamente al caricamento del player. Nota: nella maggior parte dei browser il video deve essere muted affinché l’autoplay funzioni.

fit

  • Type: string
  • Default: contain
  • Values: contain, cover

Modifica il modo in cui il video viene adattato nel riquadro del player.

  • contain — Il video viene scalato per stare nel player mantenendo le proporzioni. Può produrre bande nere.
  • cover — Il video viene scalato per coprire tutta l’area del player mantenendo le proporzioni. Può produrre ritagli.

initCaptions

  • Type: boolean
  • Default: false

Se abilitata, i sottotitoli saranno visibili di default al caricamento del player.

showTranscription

  • Type: boolean
  • Default: false

Mostra un pulsante Trascrizione nella barra dei controlli, consentendo agli utenti di visualizzare la trascrizione del video.

uiRadius

  • Type: number
  • Default: 10

Raggio del bordo (in pixel) dei controlli del player. Imposta 0 per angoli squadrati.

uiPadding

  • Type: number
  • Default: 12

Spaziatura interna (in pixel) tra i controlli del player e i bordi del player.

colorPrimary

  • Type: string (hex or rgba)
  • Default: D90B5A

Colore di evidenziazione degli elementi dell’interfaccia. Usato per stati attivi, barre di avanzamento ed elementi interattivi. Indica i valori esadecimali senza prefisso #, oppure usa il formato rgba().

colorSecondary

  • Type: string (hex or rgba)
  • Default: FFFFFF

Colore di base degli elementi dell’interfaccia. Usato per icone e testo nella barra dei controlli.

colorBackground

  • Type: string (hex or rgba)
  • Default: 000000

Colore di sfondo degli elementi dell’interfaccia. Supporta la trasparenza tramite formato rgba() (es. rgba(0,0,0,0.25)).

fullscreen

  • Type: boolean
  • Default: true

Consente di riprodurre il video a schermo intero. Se disabilitata, il pulsante schermo intero viene nascosto.

pip

  • Type: boolean
  • Default: false

Consente la modalità Picture-in-Picture. Se abilitata, gli utenti possono staccare il video in una finestra flottante.

airPlay

  • Type: boolean
  • Default: false

Consente di inviare il video in streaming tramite AirPlay (dispositivi Apple).

googleCast

  • Type: boolean
  • Default: false

Consente di inviare il video in streaming tramite Google Cast (Chromecast).

lang

  • Type: string
  • Default: Impostazione del browser

Forza la lingua dell’interfaccia e la lingua predefinita dei sottotitoli. Usa codici locali standard (es. en-US, de-DE, fr-FR).

limitQuality

  • Type: string
  • Default: 1080p
  • Values: 2160p, 1080p, 720p, 540p, 360p, 240p

Limita la qualità massima in streaming del video. Utile per gestire la banda o per restringere le opzioni di qualità in alcuni casi d’uso.

Esempio di parametri di query:

&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. Creare l’iframe

Crea un elemento iframe nel tuo HTML e imposta l’attributo src sull’URL che hai costruito nel passaggio precedente. È importante impostare alcuni attributi di stile per far sì che il player abbia l’aspetto e il comportamento che desideri.

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

Esempio dal vivo

Ecco un esempio dal vivo del player in azione:

IntroduzioneAPI del lettore