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

I parametri sono raggruppati per caso d’uso di seguito, con i gruppi più comuni per primi. All’interno di ogni gruppo, i parametri sono elencati in ordine alfabetico (tranne preset, che compare per primo in Aspetto perché sovrascrive le altre impostazioni di design).

  • Riproduzione — autoplay, limitQuality, loop, muted
  • Controlli del player — airPlay, controls, fullscreen, googleCast, lang, pip, showTranscription
  • Aspetto — preset, colorBackground, colorPrimary, colorSecondary, fit, uiPadding, uiRadius
  • Sottotitoli e lingua — captionsColorBackground, captionsColorFont, captionsOnFullscreen, captionsRadius, initCaptions

Riproduzione

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.

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.

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.

Controlli del player

airPlay

  • Type: boolean
  • Default: false

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

controls

  • Type: boolean
  • Default: true

Mostra o nascondi la barra dei controlli.

fullscreen

  • Type: boolean
  • Default: true

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

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

pip

  • Type: boolean
  • Default: false

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

showTranscription

  • Type: boolean
  • Default: false

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

Aspetto

preset

  • Type: string
  • Default: nessuno (usa il preset di design assegnato al video nell’interfaccia di amministrazione, se presente)

Applica un preset di design del player tramite ID. Crea preset nell’interfaccia di amministrazione Ignite, poi passa qui l’ID del preset per usare quel design in questo embed.

Questo sovrascrive qualsiasi preset di design già assegnato al video. Altri parametri URL (ad esempio colorPrimary o controls) sovrascrivono comunque i singoli valori del preset quando li imposti.

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

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.

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.

uiPadding

  • Type: number
  • Default: 12

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

uiRadius

  • Type: number
  • Default: 10

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

Sottotitoli e lingua

captionsColorBackground

  • Type: string (hex o rgba)
  • Default: rgba(0, 0, 0, 0.7)

Colore di sfondo delle cue dei sottotitoli. Fornisci valori hex senza il prefisso #, oppure usa il formato rgba(). Le preferenze sottotitoli del browser hanno comunque la precedenza se impostate.

captionsColorFont

  • Type: string (hex o rgba)
  • Default: white

Colore del testo delle cue dei sottotitoli. Fornisci valori hex senza il prefisso #, oppure usa il formato rgba(). Le preferenze sottotitoli del browser hanno comunque la precedenza se impostate.

captionsOnFullscreen

  • Type: boolean
  • Default: false

Se abilitata, i sottotitoli si attivano automaticamente quando lo spettatore entra a schermo intero. All’uscita si disattivano di nuovo, a meno che lo spettatore non li abbia modificati durante lo schermo intero. Se i sottotitoli sono già attivi, questa opzione non fa nulla.

Su iPhone, lo schermo intero usa la presentazione video nativa di Safari. I sottotitoli compaiono quindi tramite l’UI nativa di Apple anziché tramite l’overlay personalizzato del player.

Questa opzione risponde solo al controllo a schermo intero del player (o allo schermo intero nativo su iPhone). Se la pagina di incorporamento mette in fullscreen l’<iframe> stesso, i sottotitoli non si attivano automaticamente — in quel caso usa il metodo Player.js enableTextTrack.

captionsRadius

  • Type: number
  • Default: 6

Raggio del bordo (in pixel) delle cue dei sottotitoli. Imposta 0 per angoli netti.

initCaptions

  • Type: boolean
  • Default: false

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

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