Système d'interface utilisateur pour lecteur multimédia

Que fait Système d'interface utilisateur pour lecteur multimédia ?

Objectif

Le système d'interface utilisateur pour lecteur multimédia fournit un cadre de conception visuelle standardisé, accessible et réactif pour intégrer des interfaces de lecteurs vidéo et audio personnalisés. Les contrôles natifs HTML <video> et <audio> du navigateur présentent de sérieuses limitations : style visuel incohérent entre navigateurs, apparence non personnalisée, mauvais espacement des cibles tactiles, densité de contrôle non optimisée sur les écrans mobiles, et accessibilité imprévisible du focus clavier.

Concevoir un lecteur multimédia personnalisé efficace nécessite de trouver un équilibre entre le cadrage de la zone vidéo, les dégradés de protection superposés, la hiérarchie spatiale de la barre de contrôle (déclencheurs lecture/pause, chronologies de défilement, curseurs de volume, vitesse de lecture, qualité, sous-titres, Picture-in-Picture, plein écran), les transitions réactives du dock, et la conformité complète aux normes d'accessibilité WCAG AA. Ce skill fait le pont entre la conception et l'implémentation technique, en définissant les règles de disposition, les états d'interaction, l'ergonomie tactile et les contrôles clavier du lecteur d'écran pour les expériences vidéo et audio web.

Cas d'utilisation

• Plateformes d'apprentissage vidéo en ligne et de cours : Structurer des lecteurs vidéo personnalisés avec des sélecteurs de vitesse de lecture, des marqueurs de chapitre, des boutons de sous-titrage, des raccourcis clavier et une synchronisation des transcriptions.
• Démonstrations de produits SaaS et vidéos héros : Concevoir des lecteurs vidéo intégrés légers et personnalisés avec des déclencheurs de superposition flottante, des contrôles de boucle/muet, et un ancrage picture-in-picture persistant lors du défilement.
• Plateformes de podcasts et de streaming audio : Créer des docks de lecteur audio persistants en bas, des lecteurs audio intégrés dans des cartes, des visualiseurs de formes d'onde, et des contrôles de saut avant/arrière.
• Portails médiatiques et sites d'actualités éditoriaux : Présenter des lecteurs vidéo héros réactifs avec des sélecteurs de qualité, des options picture-in-picture, des superpositions de vidéos connexes et des sous-titres accessibles.
• Bibliothèques de composants de systèmes de design : Établir des plans directeurs visuels standardisés et personnalisables pour les lecteurs multimédias et des modèles d'accessibilité pour les systèmes de design d'entreprise.

Quand ne PAS utiliser

• Contrôles bruts du navigateur non stylisés : Pour des outils internes rapides ou des prototypes simples où les contrôles natifs du navigateur (attribut controls) suffisent, le balisage HTML standard est suffisant.
• Postes de travail d'édition vidéo complète ou de chronologie Canvas : Pour les éditeurs vidéo web non linéaires multi-pistes nécessitant des pistes de défilement de chronologie, une manipulation d'images clés et un rendu WebGL, utilisez des applications d'édition vidéo spécialisées.
• Animations décoratives d'arrière-plan pures : Pour des animations CSS ou Canvas ambiantes sans audio, contrôles de défilement ou contrôles de lecture utilisateur, utilisez interface-motion-system ou des boucles d'arrière-plan muettes standard.
• Galerie d'images et lightboxes statiques : Pour afficher des photographies fixes ou des diaporamas sans lecture multimédia basée sur le temps, utilisez image-gallery-and-lightbox-system.

Entrées

1. Type de média et ratio d'aspect : Format audio vs. vidéo, ratios d'aspect natifs (16:9 grand écran, 9:16 vidéo verticale, 1:1 carré, ou hauteur audio flexible).
2. Exigences de densité des contrôles : Contrôles multimédias requis (par ex., Lecture/Pause, Barre de défilement, Heure actuelle/Durée, Volume, Vitesse de lecture, SO/CC, Sélecteur de qualité, PiP, Plein écran, Saut de 10s).
3. Jetons de thème et de marque : Jetons de couleur pour les arrière-plans de la barre de contrôle, les surbrillances de lecture de la marque principale, les barres de progression du défileur, les anneaux de focus et la typographie (provenant de accessible-color-system, focus-indicator-design-system et fluid-typography-system).
4. Contexte du conteneur de disposition : Environnement de placement (carte intégrée, section héros pleine largeur, dock persistant collant en bas, boîte de dialogue de superposition modale).

Sorties

1. Disposition spatiale et conteneur de ratio d'aspect : Architecture CSS établissant un cadrage réactif, une préservation du ratio d'aspect et des contextes d'empilement de superposition.
2. Plan de la hiérarchie de la barre de contrôle : Disposition spatiale visuelle pour les barres d'outils de contrôle multimédia (contrôles de lecture à gauche, barre de défilement centrale, contrôles secondaires/plein écran à droite).
3. Spécification de la barre de défilement et du curseur de volume : Contrôles de plage accessibles avec info-bulles de prévisualisation temporelle au survol, indicateurs de tampon chargé et remplissages de progression visuels.
4. Transition du dock Picture-in-Picture collant : Règles réactives pour réduire les lecteurs vidéo en mini-lecteurs flottants dans le coin inférieur lorsque les utilisateurs défilent au-delà du conteneur principal de la fenêtre d'affichage.
5. Mappage ARIA accessible et navigation clavier : Spécification complète des raccourcis clavier (Espace, K, J, L, M, F, C, touches fléchées), annonceurs de statut de région live ARIA et conformité au contraste WCAG AA.

---

Workflow

1. Établir le conteneur spatial et le cadre de ratio d'aspect

Structurez le conteneur de base pour éviter les changements de disposition (CLS) pendant le chargement du média :

• Boîte de ratio d'aspect : Enveloppez les éléments vidéo dans un conteneur utilisant le ratio d'aspect CSS (aspect-ratio: 16 / 9; width: 100%; position: relative; background: #000; border-radius: 8px; overflow: hidden;).
• Empilement des couches média :
  • z-index: 1: Élément média natif <video> ou <canvas> remplissant le conteneur (width: 100%; height: 100%; object-fit: contain;).
  • z-index: 2: Superposition de dégradé sombre protégeant la lisibilité de la barre de contrôle (background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 100%); pointer-events: none;).
  • z-index: 3: Bouton central de lecture/pause de grande taille ou état de chargement de squelette.
  • z-index: 4: Conteneur de la barre d'outils de contrôle inférieure (et supérieure en option).

2. Concevoir le grand bouton de lecture central et les états de chargement

Fournissez des indications visuelles importantes pour l'engagement initial de la lecture :

• Superposition du bouton de lecture : Positionnez un bouton circulaire proéminent de 64x64px (desktop) ou 56x56px (mobile) au centre visuel exact (top: 50%; left: 50%; transform: translate(-50%, -50%);).
  • Style : background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #FFFFFF;.
  • Survol/Focus : scale(1.1); background: var(--brand-primary); border-color: transparent;.
  • Comportement : Disparaît (opacity: 0; pointer-events: none; transition: opacity 0.25s ease;) une fois la lecture commencée, réapparaît en pause.
• Spinner de mise en mémoire tampon/chargement : Affichez un spinner indéterminé circulaire à contraste élevé superposé au centre du canevas vidéo lorsque le tampon multimédia tombe en dessous du seuil de lecture.

3. Construire la hiérarchie de la barre de contrôle inférieure

Organisez les contrôles dans une disposition flex à 3 parties propre ancrée en bas du cadre multimédia :

• Positionnement du conteneur : position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; z-index: 4;.
• Ligne de défilement principale (Ligne 1) : Placez le défileur de chronologie interactif sur toute la largeur en haut de la barre de contrôle ou en ligne dans les dispositions horizontales.
• Ligne d'actions de la barre de contrôle (Ligne 2) :
  • Groupe gauche (Lecture et volume) :
    1. Bouton Lecture/Pause : Bouton d'icône 40x40px (aria-label="Lecture" / aria-label="Pause").
    2. Boutons Reculer/Avancer (optionnel) : Boutons 36x36px pour "Revenir 10s" / "Avancer 10s".
    3. Groupe Volume : Bouton d'icône de basculement du muet + curseur de plage extensible au survol/focus (width: 0 -> 80px transition fluide) ou curseur persistant.
    4. Affichage du temps : Compteur de texte 02:14 / 10:45 utilisant des chiffres monospaces (font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: #FFFFFF;).
  • Groupe droit (Paramètres et modes d'écran) :
    1. Bouton de basculement des sous-titres codés (CC) : Bouton d'icône avec badge d'activation visuelle lorsqu'il est actif (border-bottom: 2px solid var(--brand-primary)).
    2. Déclencheur du menu de vitesse de lecture : Bouton de menu déroulant ou popover affichant la vitesse active (par ex., 1.0x, 1.5x, 2.0x).
    3. Déclencheur Picture-in-Picture (PiP) : Bouton d'icône pour lancer le mode PiP du navigateur.
    4. Bouton de basculement plein écran : Bouton d'icône pour basculer en affichage plein écran/pleine fenêtre (aria-label="Activer le plein écran" / aria-label="Quitter le plein écran").

4. Construire la barre de défilement de chronologie et le curseur de volume accessibles

Les barres de défilement de chronologie doivent être entièrement tactiles, précises et accessibles au clavier :

• Architecture d'entrée de plage : Utilisez <input type="range" min="0" max="100" step="0.1"> ou un curseur ARIA personnalisé (role="slider", aria-valuemin="0", aria-valuemax="100", aria-valuenow="23", aria-valuetext="2 minutes 14 secondes sur 10 minutes 45 secondes").
• Superposition des pistes :
  1. Piste d'arrière-plan : Piste grise de base (height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px;). Étendez la piste à 8px de hauteur au survol/focus.
  2. Barre de tampon : Barre secondaire montrant le tampon vidéo préchargé (background: rgba(255,255,255,0.5);).
  3. Barre de progression lue : Barre de couleur primaire vive montrant la progression lue (background: var(--brand-primary, #3B82F6);).
  4. Pouce du défileur : Poignée de pouce circulaire 14x14px (background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.4);). Étendez à 18x18px au survol/glissement.
• Info-bulle de prévisualisation temporelle au survol : Affichez une boîte d'horodatage flottante (background: #000; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;) positionnée au-dessus de l'emplacement du curseur de la souris le long de la piste du défileur.

5. Implémenter le Picture-in-Picture (PiP) et l'ancrage collant basé sur le défilement

Évitez la perte du contexte vidéo lorsque les utilisateurs font défiler de longues pages d'articles ou de produits :

• Observateur de défilement (IntersectionObserver) : Suivez lorsque le conteneur multimédia principal défile hors du seuil actif de la fenêtre d'affichage (<20% visible).
• État de mini-lecteur flottant :
  • Transitionnez le lecteur vers un dock de coin fixe flottant (position: fixed; bottom: 24px; right: 24px; width: 320px; aspect-ratio: 16/9; z-index: 1000; box-shadow: var(--shadow-xl); border-radius: 12px; border: 1px solid var(--border-subtle); animation: slideInUp 0.3s ease;).
  • Ajoutez un bouton de fermeture/agrandissement en haut à droite sur le mini-lecteur (aria-label="Ignorer le lecteur collant" / aria-label="Revenir à la position vidéo").
  • Simplifiez la barre de contrôle en mode collant pour les déclencheurs principaux Lecture/Pause, Fermer et Muet.

6. Implémenter les raccourcis clavier et l'accessibilité ARIA

Assurez un contrôle complet du clavier sans nécessiter de souris ou d'interactions par pointeur :

• Raccourcis clavier globaux/avec focus :
  • Espace ou K : Basculer Lecture/Pause.
  • J : Reculer de 10 secondes.
  • L : Avancer rapidement de 10 secondes.
  • Flèche gauche / Flèche droite : Reculer / Avancer rapidement de 5 secondes.
  • Flèche haut / Flèche bas : Augmenter / Diminuer le volume de 10%.
  • M : Basculer Muet / Rétablir le son.
  • F : Basculer en mode plein écran.
  • C : Activer / Désactiver les sous-titres codés.
  • 0 à 9 : Chercher à 0% - 90% de la durée totale de la vidéo.
• Annonces de statut pour lecteur d'écran :
  • Envoyez les mises à jour de statut à une région aria-live="polite" invisible (par ex., "Mis en pause à 2 minutes 14 secondes", "Volume réglé à 80%", "Sous-titres activés").

---

Règles de décision

Configurations de disposition de la barre de contrôle multimédia

Type de média et emplacement	Motif spatial de la barre de contrôle	Contrôles clés recommandés
Vidéo héros / Vidéo de cours (>640px)	Barre de superposition flottante complète	Contrôles complets : gros bouton de lecture central, barre de défilement complète, heure, volume, CC, vitesse, PiP, plein écran.
Carte vidéo intégrée compacte (<480px)	Barre flottante condensée	Contrôles essentiels : Lecture/Pause, barre de défilement intégrée, heure, basculement du muet, plein écran.
Dock audio persistant en bas (Global)	Barre collante à 3 colonnes	Gauche : Infos sur la piste (vignette + titre) ; Centre : Lecture/Pause + Saut de 10s + barre de défilement ; Droite : Volume + Liste de lecture.
Carte de podcast audio intégrée	Boîte horizontale intégrée	Bouton circulaire Lecture/Pause, titre de la piste + barre de progression, heure actuelle / durée totale, menu de vitesse.

Stratégie de masquage automatique de la superposition vidéo

• En cours de lecture : Masquez automatiquement la barre de contrôle superposée après 2,5 secondes d'inactivité du pointeur dans le canevas vidéo (opacity: 0; cursor: none; transition: opacity 0.3s ease;).
• En pause ou avec focus : Gardez la barre de contrôle toujours visible (opacity: 1) afin que les contrôles restent immédiatement accessibles.
• Sur focus clavier : Lorsque le focus clavier entre dans un bouton de contrôle du lecteur, gardez les contrôles immédiatement visibles (:focus-within { opacity: 1; }).

---

Contraintes

• Accessibilité (WCAG 2.1 AA) :
  • SC 1.2.2 Sous-titres (préenregistrés) : Un bouton de sous-titrage doit être fourni pour les médias vidéo synchronisés avec la parole audio.
  • SC 1.4.3 Contraste (minimum) : Les icônes de contrôle, les compteurs de texte et les pistes de progression du défileur doivent maintenir un contraste d'au moins 4,5:1 par rapport aux arrière-plans de la superposition de contrôle.
  • SC 2.1.1 Clavier : Chaque fonction du lecteur (lecture, pause, recherche, volume, CC, vitesse, plein écran) doit être entièrement accessible via la navigation au clavier.
  • SC 2.4.7 Focus visible : Les boutons de contrôle du lecteur avec focus doivent afficher un indicateur de focus à contraste élevé non rogné (outline: 2px solid #FFFFFF; outline-offset: 2px;).
  • SC 2.5.8 Taille de la cible : Les boutons de contrôle interactifs et les pouces de curseur doivent fournir une cible tactile minimale de 24x24px (minimum 44x44px pour les écrans tactiles mobiles).
• Prévention des changements de disposition : Le wrapper de ratio d'aspect doit être déclaré avec aspect-ratio CSS ou des astuces de remplissage supérieur pour empêcher les recalculs de disposition de page pendant le chargement de la vidéo.
• Ergonomie des gestes tactiles : Un double-clic sur les zones gauche/droite du canevas vidéo sur les appareils tactiles mobiles doit déclencher un saut arrière/avant de 10 secondes avec un retour de ripple visible.

---

Modes de défaillance courants

• Wrappers personnalisés natifs inaccessibles : Masquer les contrôles natifs du navigateur tout en omettant de fournir des raccourcis clavier ou des attributs ARIA sur les boutons <div> HTML personnalisés, bloquant complètement les utilisateurs de clavier et de lecteur d'écran.
• Superpositions de contrôle clignotantes : Masquer les barres de contrôle immédiatement sans délai ni transition alors que la souris se déplace activement près du curseur de la barre de défilement.
• Mise à l'échelle plein écran non contrainte : Ne pas maintenir un ratio d'aspect approprié en mode plein écran, entraînant des proportions vidéo étirées ou déformées.
• Contrôles à faible contraste sur des cadres vidéo clairs : Rendre des icônes de contrôle blanches unies sans superposition de dégradé sombre sous-jacent (rgba(0,0,0,0.7)), rendant les contrôles invisibles sur un contenu vidéo clair.