Video.js v10 - le lecteur vidéo open source 88 % plus léger

• Réécrit entièrement après 16 ans, Video.js v10 renaît avec une taille de bundle réduite de 88 % et une architecture adaptée aux environnements de développement modernes
• Prend en charge React, TypeScript et Tailwind comme citoyens de première classe, avec une UI par défaut soignée et une structure documentaire pensée pour l’IA
• Le nouveau Streaming Processor Framework (SPF) permet de construire un moteur de streaming modulaire en n’assemblant que les fonctions nécessaires, pour atteindre un allègement à 12 % de la taille de HLS.js
• Grâce à une architecture basée sur la composition et à un système de skins React/Web Components, il est possible de remplacer ou supprimer librement l’UI et les fonctionnalités
• La sortie officielle est visée pour 2026, avec l’ambition d’évoluer vers une plateforme média open source de nouvelle génération grâce au développement collaboratif avec l’IA et à un écosystème de presets extensible

---

Présentation de la bêta de Video.js v10

• La bêta de Video.js v10.0.0 est une réécriture complète après 16 ans, fruit d’une collaboration entre plusieurs projets open source comme Video.js, Plyr, Vidstack et Media Chrome
• L’écosystème réunit au total 75 000 étoiles sur GitHub et des milliards de lectures mensuelles ; il a été repensé pour des méthodes de développement modernes et un environnement de développement assisté par l’IA
• Les principaux objectifs sont une réduction de 88 % de la taille du bundle, la prise en charge native de React, TypeScript et Tailwind, une UI par défaut soignée et une structure documentaire pensée pour l’IA

Réduction de la taille du bundle et amélioration des performances

• Le lecteur Video.js v10 de base affiche une réduction de 88 % de la taille du bundle par défaut par rapport à la v8, et encore 66 % de réduction même sans la fonction ABR (Adaptive Bitrate)
  • Exemple : v8 de base 260.5kB (minified) → lecteur vidéo HTML v10 97.4kB (minified), version React 62.0kB
• Avec l’introduction du nouveau Streaming Processor Framework (SPF), il devient possible de composer un moteur de streaming modulaire ne contenant que les fonctions nécessaires
  • Pour un usage HLS simple, v10+SPF représente 19 % de la taille de fichier de v8+VHS
  • Le moteur SPF lui-même ne fait que 12 % de la taille de HLS.js-light (38.5kB minified), optimisé pour un traitement ABR simple
• SPF est compatible avec tous les moteurs existants comme HLS.js, Shaka et dash.js ; si des fonctions complexes comme le DRM ou la publicité ne sont pas nécessaires, une réduction extrême du poids devient possible

Architecture basée sur la composition

• La v10 adopte une structure de composants séparant State, UI et Media, permettant de remplacer ou supprimer chaque élément indépendamment
  • La fonction createPlayer() accepte un tableau features afin de n’inclure que les fonctionnalités nécessaires
  • Exemple : si les fonctions audio ne sont pas requises, le code volume et mute n’est pas inclus dans le bundle
• Pour supprimer l’UI, il suffit de ne pas charger de skin — ce qui permet d’exclure complètement tout code inutile
• Un exemple React minimal fonctionne avec moins de 5kB (gzipped) et n’inclut qu’un simple bouton lecture/pause

Personnalisation de l’UI et système de skins

• La v10 propose un système de skins basé sur React et Web Components, et adopte une structure d’unstyled UI primitives inspirée notamment de Base UI et Radix
  • Chaque composant UI génère un seul élément HTML, permettant un contrôle direct
• Le curseur de la timeline, autrefois contrôlé via des pseudo-éléments CSS dans la v8, est désormais exposé dans la v10 comme un véritable élément DOM, ce qui simplifie le style
• La bêta inclut deux skins
  • Skin par défaut : esthétique semi-transparente (frosted), animations fluides
  • Skin minimal : base épurée pour la personnalisation
• Le design des dialogues d’erreur est également unifié entre les skins, pour une meilleure cohérence visuelle

Système de presets

• La v10 introduit la notion de preset selon l’usage, avec des modèles de lecteur prêts à l’emploi combinant skin, fonctions et configuration média
  • Video preset : pour la vidéo web classique
  • Audio preset : pour l’audio seul, comme les podcasts
  • Background video preset : pour les vidéos d’arrière-plan, sans contrôles ni audio
• Les presets offrent un point de départ rapide tout en permettant de remplacer tous les composants, sans sacrifier l’extensibilité
• D’autres presets sont prévus, notamment pour l’éducation, les formats courts et les plateformes pour créateurs

Conception pensée pour l’IA

• La v10 vise une structure dans laquelle des agents IA peuvent participer au développement
  • Des composants non abstraits et des unstyled UI primitives améliorent la compréhension du code
  • Un fichier llms.txt est fourni pour faciliter la navigation dans la documentation, avec des versions par framework
  • Toute la documentation est fournie au format Markdown, afin que l’IA puisse y accéder directement sans contexte HTML superflu
  • Un ensemble de compétences IA dans le dépôt doit à terme aider les développeurs utilisateurs

Guide d’utilisation de la bêta

• L’API n’est pas encore stabilisée et certaines interfaces peuvent encore changer avant la sortie officielle
• Pour l’instant, l’accent est mis sur la lecture de base sur site web ; l’accessibilité, les sous-titres et la prise en charge de divers formats sont possibles, mais des fonctions comme le menu de réglages ne sont pas encore implémentées
• Les retours via GitHub Issues et Discord sont activement collectés
• Il est recommandé aux utilisateurs des versions précédentes d’attendre la publication du guide de migration avant de basculer

Feuille de route

• Objectif de sortie officielle (GA) à la mi-2026
• Parité fonctionnelle visée avec Plyr, Vidstack et Media Chrome
• La prise en charge de la publicité est prévue pour le second semestre 2026
• Un guide de migration et des presets supplémentaires sont prévus