← Retour au Design System

Video Player

Lecteur vidéo personnalisé avec contrôles complets, barre de progression, gestion du volume et mode plein écran.

Exemple de base

00:00

-00:00

<VideoPlayer 
  src="video-url.mp4"
  poster="poster-image.jpg"
  size="md"
/>

Tailles disponibles

00:00

-00:00

sm - Small - max 320px width

<VideoPlayer src="video.mp4" size="sm" />

00:00

-00:00

md - Medium - max 560px width

<VideoPlayer src="video.mp4" size="md" />

00:00

-00:00

lg - Large - max 720px width

<VideoPlayer src="video.mp4" size="lg" />

Avec sous-titres

00:00

-00:00

Le lecteur supporte plusieurs pistes de sous-titres au format WebVTT

<VideoPlayer 
  src="video.mp4"
  size="lg"
  tracks={[
    {
      src: "/subtitles/french.vtt",
      kind: "subtitles",
      srclang: "fr",
      label: "Français"
    },
    {
      src: "/subtitles/english.vtt",
      kind: "subtitles",
      srclang: "en",
      label: "English"
    }
  ]}
/>

Référence API

Props	Type	Défaut	Description
src	string	-	URL de la vidéo à lire (requis)
poster?	string	-	URL de l'image de prévisualisation affichée avant la lecture
size?	"sm" \| "md" \| "lg"	"md"	Taille du lecteur vidéo. Affecte la largeur maximale et les contrôles disponibles
className?	string	-	Classes CSS additionnelles pour personnaliser le style

Type Track

interface Track {
  src: string;              // URL du fichier de sous-titres
  kind: "subtitles" | "captions";
  srclang: string;          // Code langue (ex: "fr", "en")
  label: string;            // Nom affiché (ex: "Français")
}

Raccourcis clavier

Touche	Action
Espace / K	Lecture / Pause
← →	Reculer / Avancer de 5 secondes
↑ ↓	Augmenter / Diminuer le volume
M	Mute / Unmute
F	Mode plein écran
0-9	Aller à 0-90% de la vidéo