Le player vidéo de Streamfizz : une évolution vers la performance

Chez Streamfizz, le player vidéo est au cœur de notre expertise. En tant que spécialiste français de la vidéo, nous avons toujours accordé une importance primordiale à offrir une expérience de lecture fluide, performante et respectueuse de la souveraineté numérique. Voici un retour sur les différentes étapes qui ont jalonné l'évolution de notre player, jusqu'à notre nouvelle version.

Phase 1 : JW Player – une Solution performante mais peu flexible

C'est quoi JW Player ?

JW Player a été créé en 2005 par Jeroen Wijering, étudiant néerlandais en design, comme projet open source Flash. À cette époque, la vidéo en ligne était balbutiante et les solutions existantes nécessitaient des plugins séparés avec une compatibilité cross-browser médiocre. L'innovation de Wijering résidait dans un player Flash léger, facilement intégrable et compatible tous navigateurs. JW Player est devenu viral, adopté par YouTube et Facebook, avant de se transformer en solution commerciale alimentant aujourd'hui plus de 3 millions de sites web.

Notre expérience avec JW Player

À nos débuts, nous avons opté pour JW Player, une solution réputée pour sa robustesse et ses performances. Cependant, plusieurs limitations sont rapidement apparues :

• Personnalisation limitée : Malgré quelques options de configuration, nous n'avions pas un contrôle direct sur le player et ne pouvions pas facilement développer des solutions maison.
• Problèmes de souveraineté : L'envoi d'un pixel via une requête vers des serveurs situés aux États-Unis posait des problèmes de conformité avec notre vision d'une plateforme respectueuse des données, hébergée en France.

Phase 2 : Video.js – Plus de contrôle, mais une complexité accrue

C'est quoi Video.js ?

Video.js a été créé en mai 2010 par Steve Heffernan, entrepreneur dirigeant Zencoder, pour résoudre les problèmes de fragmentation de l'HTML5 vidéo naissant. Alors que moins de 30% des navigateurs supportaient l'HTML5 et que le Flash montrait ses limites, Heffernan a développé une solution open source offrant une interface unifiée CSS cross-browser et une API JavaScript cohérente. Cette approche "HTML5-native" avec fallback Flash a permis à Video.js de devenir la référence open source, alimentant aujourd'hui plus de 450 000 sites web.

Notre expérience avec Video.js

Nous avons ensuite migré vers Video.js, une bibliothèque open-source plus flexible. Cela nous a permis de :

• Développer des plugins spécifiques : Intégration de fonctionnalités via des extensions comme Nuevo pour gérer la sélection automatique de qualité, les annonces pré-roll et post-roll, etc.
• Bénéficier de l'open source : Accès au code source complet, possibilité de contributions communautaires et absence de coûts de licence.

Mais cette solution avait aussi ses inconvénients :

• Poids et complexité : Video.js reste un plugin lourd, et développer dessus demande beaucoup de temps et de tests.
• Support HLS avec VHS : Depuis Video.js 7, Video.js HTTP Streaming (VHS) est intégré par défaut. Bien que cette évolution ait simplifié la lecture HLS par rapport aux versions antérieures qui nécessitaient des plugins séparés, l'architecture globale restait lourde.
• Intégration difficile avec React/Next.js : L'intégration dans notre stack moderne restait fastidieuse, notamment côté typage et pour intégrer une solution statique dans un rendu React.

Zoom sur le HLS : le choix technique au cœur de notre stratégie

Avant de présenter notre nouvelle architecture, il est important de comprendre pourquoi le protocole HLS (HTTP Live Streaming) est central dans toutes nos décisions techniques.

HLS fut créé par Roger Pantos chez Apple en 2008-2009 pour résoudre les limitations critiques du streaming mobile naissant. Face à l'absence de Flash sur iOS et aux problèmes de connectivité des premiers iPhone, Apple développe une solution révolutionnaire : un protocole basé sur HTTP standard, utilisant une livraison segmentée avec streaming adaptatif automatique. Cette innovation technique transforme l'industrie en permettant l'émergence du streaming mobile massif et en créant les fondations de l'écosystème vidéo moderne.

Cette révolution technique explique notre choix stratégique chez Streamfizz. En adoptant HLS pour toutes nos vidéos, nous bénéficions de cette maturité technologique éprouvée :

• Lecture segmentée : Les vidéos sont découpées en petits fichiers (.ts) de quelques secondes. Cela permet une lecture fluide et adaptative, réduisant le temps de chargement initial.
• Multi-bitrate par défaut : Streamfizz génère automatiquement plusieurs résolutions (360p, 480p, 720p, etc.), et HLS sélectionne dynamiquement la meilleure selon la bande passante disponible.
• Résilience réseau : En cas de coupure ou ralentissement, HLS est capable de récupérer sans relancer tout le flux, ce qui garantit une meilleure continuité de lecture.

Phase 3 (nouvelle) : Media Chrome + hls-video-element : une architecture moderne et modulable

C'est quoi Media Chrome ?

Media Chrome a été créé en 2021 par Steve Heffernan (créateur de Video.js) chez Mux pour révolutionner l'architecture des lecteurs vidéo. Dès 2015, Heffernan présentait le potentiel des Web Components pour dépasser les limitations des solutions existantes : contrôles natifs peu personnalisables, APIs propriétaires complexes, et coupling serré entre UI et logique de lecture. Media Chrome concrétise cette vision en séparant totalement l'interface utilisateur du moteur de lecture, permettant aux développeurs de construire des players avec HTML/CSS standard.

C'est quoi hls.js ?

hls.js a été développé en 2015 par Guillaume du Pontavice chez Dailymotion pour résoudre un problème critique : l'absence de support HLS natif dans les navigateurs non-Safari. Utilisant les Media Source Extensions, hls.js effectue un transmuxing en temps réel (conversion MPEG-2 TS vers MP4) directement en JavaScript. Cette innovation technique démocratise le streaming HLS et alimente aujourd'hui plus de 10 milliards de vidéos par mois sur des plateformes comme YouTube, Twitch et Dailymotion.

Notre adoption de cette architecture moderne

Fort de cette compréhension des enjeux techniques, nous avons fait le choix de coupler Media Chrome avec hls-video-element. Cette combinaison nous offre le meilleur des deux mondes : la flexibilité des Web Components pour l'interface et la robustesse d'hls.js pour la lecture HLS.

Ce duo nous a permis de construire une interface moderne, légère et totalement personnalisable, parfaitement adaptée à notre architecture React/TypeScript.

Un thème moderne et intuitif

Grâce à la flexibilité de Media Chrome, nous avons pu développer un thème entièrement sur-mesure qui reflète l'identité visuelle de Streamfizz. La séparation claire entre l'UI et la logique de lecture nous a permis de :

• Créer une expérience cohérente : Design unifié sur tous nos produits
• Optimiser l'ergonomie : Interface intuitive adaptée aux différents contextes d'usage

Une surcouche métier, pensée pour la fiabilité et l'innovation

Notre player repose aujourd'hui sur ce socle moderne (Media Chrome + hls.js), mais ce qui en fait une solution unique, c'est notre surcouche maison, développée en React + TypeScript + Vite :

Fonctionnalités avancées Streamfizz

• Playlists HLS dynamiques : hls.js ne gère pas les enchaînements de vidéos. Nous avons ajouté une couche spécifique pour lire des playlists HLS comme une seule session continue, avec les contrôles adéquats.
• Gestion avancée des annonces : Injection dynamique de pré-rolls et post-rolls selon le contexte métier.
• Événements personnalisés & analytics : Intégration d'events custom pour nos outils de mesure propriétaires, avec une granularité fine sur les interactions.
• Support AirPlay et Chromecast : Intégration native des fonctionnalités de diffusion vers les appareils Apple TV, smart TV et autres dispositifs compatibles, permettant à vos utilisateurs de projeter facilement leurs contenus.
• Preview thumbnails optimisées : Affichage instantané de miniatures au survol de la barre de progression, générées automatiquement par Streamfizz et optimisées pour un chargement rapide, offrant une navigation précise dans le contenu.
• Chapitres visuels : Affichage des chapitres directement sur la barre de progression avec des marqueurs visuels, permettant une navigation rapide entre les différentes sections du contenu.
• Éclairage studio optimisé : Nous avons optimisé notre fonctionnalité d'ambient lighting qui ajoute un overlay avec les couleurs d'accentuation extraites de la vidéo, créant une atmosphère immersive autour du player. Un article dédié suivra prochainement pour détailler les améliorations apportées à cette fonctionnalité.
• Indicateur "En différé" : Affichage en temps réel du décalage par rapport au direct en cours, permettant aux utilisateurs de savoir instantanément à combien de secondes ils se trouvent du live, facilitant ainsi la navigation entre le différé et le direct.
• Module sous-titres avancé : Nouveau système de sous-titres qui met en valeur les sous-titres de manière élégante et visible, avec un design moderne qui améliore la lisibilité tout en préservant l'expérience visuelle du contenu.

Résilience en direct

Le live streaming nécessite une attention particulière : nous avons développé une logique de reconnexion automatique en cas de coupure réseau, assurant une reprise fluide sans intervention utilisateur. Cette fiabilité est essentielle pour les événements diffusés en direct sur notre plateforme française.

Un plugin privé et réutilisable

Notre player est désormais packagé sous forme de plugin privé (pour le moment 😎 ) en React/TypeScript, compilé avec Vite. Il est facilement importable dans tous les projets Streamfizz, ce qui garantit :

• Une cohérence UI/UX sur tous nos produits.
• Une maintenance centralisée.
• Une accélération du temps de mise en production pour chaque nouvelle interface.
• Une évolutivité technique facilitée grâce à l'architecture modulaire de Media Chrome.

Une couverture de tests End-to-End complète

Cette nouvelle version du player s'accompagne d'une approche rigoureuse en matière de qualité : nous avons développé une suite complète de tests automatisés end-to-end avec Cypress. Contrairement aux tests unitaires traditionnels qui, bien qu'utiles, ne reflètent pas toujours la réalité de l'usage, nos tests Cypress simulent un comportement naturel des utilisateurs.

Ces tests couvrent l'ensemble des parcours utilisateur : lecture, pause, changement de qualité, navigation dans les chapitres, utilisation des fonctionnalités AirPlay/Cast, et bien plus encore. Cette approche nous permet de détecter rapidement tout problème d'intégration et de garantir une expérience utilisateur optimale à chaque déploiement.

Conclusion

Notre player vidéo a évolué d'un outil "clé en main" à une solution entièrement sur-mesure, optimisée pour la performance, la personnalisation et la résilience. Grâce à une base technique moderne basée sur les Web Components et notre expertise métier développée depuis près de 4 ans, nous garantissons à nos utilisateurs une expérience de lecture optimale, que ce soit en VOD ou en direct.

Cette évolution illustre parfaitement notre engagement envers l'innovation technique au service de l'expérience utilisateur, tout en conservant notre indépendance technologique. Le choix de Media Chrome s'inscrit dans cette démarche, nous offrant la flexibilité nécessaire pour continuer à innover et à répondre aux besoins spécifiques de nos clients français. Notre player est entièrement développé en interne, sans aucune dépendance à des services tiers, et construit exclusivement avec des technologies open source.