Skip to Content
Lecteur vidéo (embed)Installation

Lecteur vidéo Ignite intégrable

En plus d’utiliser notre API complète pour créer ton propre lecteur vidéo, la façon la plus courante d’intégrer des vidéos Ignite est d’utiliser notre lecteur vidéo iFrame intégrable.

1. URL iframe du lecteur

Tu peux copier-coller le fragment HTML iframe depuis ton interface d’administration Ignite ou créer toi-même l’URL de l’iframe en suivant une logique simple. Il te faut d’abord construire ton URL d’intégration de base.

URL de base :

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

Exemple :

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

2. Configurer lecteur

Tu peux configurer le comportement et l’apparence du lecteur en ajoutant des paramètres de requête à l’URL d’intégration.

Tous les paramètres sont facultatifs et ont des valeurs par défaut raisonnables. Tu peux combiner plusieurs paramètres en les séparant par & dans ton URL :

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

Les options disponibles sont regroupées dans les catégories suivantes :

  • Lecture — Contrôle la lecture de la vidéo (autoplay, loop, muted, limitQuality)
  • Contrôles — Configure l’interface du lecteur (controls, fullscreen, pip, airPlay, googleCast)
  • Sous-titres et langue — Réglages des sous-titres et de la localisation (initCaptions, showTranscription, lang)
  • Apparence — Personnalise le rendu (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Type : boolean
  • Par défaut : true

Affiche ou masque la barre de contrôle.

loop

  • Type : boolean
  • Par défaut : false

Fait boucler la lecture. Une fois activée, la vidéo redémarre automatiquement depuis le début à la fin.

muted

  • Type : boolean
  • Par défaut : false

Démarre la vidéo en sourdine. Souvent nécessaire avec autoplay à cause des politiques de lecture automatique des navigateurs.

autoplay

  • Type : boolean
  • Par défaut : false

Lance la vidéo automatiquement au chargement du lecteur. La plupart des navigateurs exigent que la vidéo soit en muted pour que la lecture automatique fonctionne.

fit

  • Type : string
  • Par défaut : contain
  • Valeurs : contain, cover

Modifie le cadrage de la vidéo dans le cadre du lecteur.

  • contain — La vidéo est mise à l’échelle pour tenir dans le lecteur tout en conservant son rapport hauteur/largeur. Peut créer des bandes noires.
  • cover — La vidéo est mise à l’échelle pour couvrir toute la zone du lecteur tout en conservant son rapport hauteur/largeur. Peut rogner l’image.

initCaptions

  • Type : boolean
  • Par défaut : false

Une fois activé, les sous-titres sont visibles par défaut au chargement du lecteur.

showTranscription

  • Type : boolean
  • Par défaut : false

Affiche un bouton Transcription dans la barre de contrôle pour permettre aux utilisateurs de consulter la transcription de la vidéo.

uiRadius

  • Type : number
  • Par défaut : 10

Rayon de bordure (en pixels) des contrôles du lecteur. Règle sur 0 pour des angles droits.

uiPadding

  • Type : number
  • Par défaut : 12

Marge intérieure (en pixels) entre les contrôles du lecteur et les bords du lecteur.

colorPrimary

  • Type : string (hex ou rgba)
  • Par défaut : D90B5A

Couleur d’accentuation des éléments d’interface. États actifs, barres de progression et éléments interactifs. Fournis des valeurs hex sans préfixe #, ou au format rgba().

colorSecondary

  • Type : string (hex ou rgba)
  • Par défaut : FFFFFF

Couleur de base des éléments d’interface. Icônes et texte dans la barre de contrôle.

colorBackground

  • Type : string (hex ou rgba)
  • Par défaut : 000000

Couleur de fond des éléments d’interface. La transparence est prise en charge via le format rgba() (ex. rgba(0,0,0,0.25)).

fullscreen

  • Type : boolean
  • Par défaut : true

Autorise le passage en plein écran. Si désactivé, le bouton plein écran est masqué.

pip

  • Type : boolean
  • Par défaut : false

Autorise le mode image dans l’image (Picture-in-Picture). Une fois activé, les utilisateurs peuvent détacher la vidéo dans une fenêtre flottante.

airPlay

  • Type : boolean
  • Par défaut : false

Autorise la diffusion de la vidéo via AirPlay (appareils Apple).

googleCast

  • Type : boolean
  • Par défaut : false

Autorise la diffusion de la vidéo via Google Cast (Chromecast).

lang

  • Type : string
  • Par défaut : Réglage du navigateur

Force la langue de l’interface et des sous-titres par défaut. Utilise des codes de locale standards (ex. en-US, de-DE, fr-FR).

limitQuality

  • Type : string
  • Par défaut : 1080p
  • Valeurs : 2160p, 1080p, 720p, 540p, 360p, 240p

Limite la qualité maximale du flux vidéo. Utile pour gérer la bande passante ou restreindre les options de qualité pour certains cas d’usage.

Exemple de paramètres de requête :

&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. Créer iframe

Crée un élément iframe dans ton HTML et définis l’attribut src sur l’URL construite à l’étape précédente. Il est important de définir des attributs de style pour que le lecteur se comporte et s’affiche comme tu le souhaites.

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

Exemple en direct

Voici un exemple en direct du lecteur en action :

IntroductionAPI du lecteur