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 paramètres sont regroupés par cas d’usage ci-dessous, les groupes les plus courants en premier. Dans chaque groupe, les paramètres sont listés par ordre alphabétique (sauf preset, qui vient en premier sous Apparence car il remplace les autres réglages de design).

  • Lecture — autoplay, limitQuality, loop, muted
  • Contrôles du lecteur — airPlay, controls, fullscreen, googleCast, lang, pip, showTranscription
  • Apparence — preset, colorBackground, colorPrimary, colorSecondary, fit, uiPadding, uiRadius
  • Sous-titres et langue — captionsColorBackground, captionsColorFont, captionsOnFullscreen, captionsRadius, initCaptions

Lecture

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.

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.

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.

Contrôles du lecteur

airPlay

  • Type : boolean
  • Par défaut : false

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

controls

  • Type : boolean
  • Par défaut : true

Affiche ou masque la barre de contrôle.

fullscreen

  • Type : boolean
  • Par défaut : true

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

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

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.

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.

Apparence

preset

  • Type : string
  • Par défaut : aucun (utilise le preset de design assigné à la vidéo dans l’interface d’administration, s’il y en a un)

Applique un preset de design du lecteur par ID. Crée des presets dans l’interface d’administration Ignite, puis passe l’ID du preset ici pour utiliser ce design pour cette intégration.

Cela remplace tout preset de design déjà assigné à la vidéo. Les autres paramètres d’URL (par exemple colorPrimary ou controls) remplacent toujours les valeurs individuelles du preset lorsque tu les définis.

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

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.

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.

uiPadding

  • Type : number
  • Par défaut : 12

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

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.

Sous-titres et langue

captionsColorBackground

  • Type : string (hex ou rgba)
  • Par défaut : rgba(0, 0, 0, 0.7)

Couleur de fond des cues de sous-titres. Fournis les valeurs hex sans le préfixe #, ou utilise le format rgba(). Les préférences de sous-titres du navigateur restent prioritaires si elles sont définies.

captionsColorFont

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

Couleur du texte des cues de sous-titres. Fournis les valeurs hex sans le préfixe #, ou utilise le format rgba(). Les préférences de sous-titres du navigateur restent prioritaires si elles sont définies.

captionsOnFullscreen

  • Type : boolean
  • Par défaut : false

Une fois activé, les sous-titres s’activent automatiquement lorsque le spectateur passe en plein écran. À la sortie, ils se désactivent à nouveau, sauf si le spectateur les a modifiés pendant le plein écran. Si les sous-titres sont déjà activés, cette option ne fait rien.

Sur iPhone, le plein écran utilise la présentation vidéo native de Safari. Les sous-titres apparaissent alors via l’UI native d’Apple plutôt que via l’overlay personnalisé du lecteur.

Cette option ne réagit qu’au contrôle plein écran du lecteur (ou au plein écran natif sur iPhone). Si la page d’intégration passe l’<iframe> lui-même en plein écran, les sous-titres ne s’activent pas automatiquement — utilise alors la méthode Player.js enableTextTrack.

captionsRadius

  • Type : number
  • Par défaut : 6

Rayon de bordure (en pixels) des cues de sous-titres. Mets 0 pour des coins droits.

initCaptions

  • Type : boolean
  • Par défaut : false

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

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