Présentation du lecteur MYETV
Le lecteur vidéo MYETV est une expérience multimédia HTML5 moderne conçue pour un démarrage rapide, une interface utilisateur propre et une personnalisation approfondie sur les surfaces web et TV, continuant l'évolution de la plateforme à partir de ses anciens lecteurs HTML5 vers un outil entièrement ouvert et extensible. Basé sur des technologies web standard, il prend en charge les sous-titres, les chapitres, les thèmes, les plugins et une API JavaScript documentée afin que les équipes puissent l'intégrer, le personnaliser et l'étendre de manière fiable sur tous les appareils. Le code source sera publié en tant que code source ouvert sous la licence MIT dans le référentiel GitHub officiel pour encourager les examens de la communauté, les contributions et l'utilisation.
Lien GitHub : https://github.com/OskarCosimo/myetv-video-player-opensource/
Lien de démonstration : https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html
Licence MIT en bref
La licence MIT est une licence open source courte et permissive qui permet l'utilisation, la copie, la modification, la distribution, le sous-licenciement et l'utilisation commerciale, à condition que la notice de copyright et de licence d'origine soit conservée. Le logiciel est fourni “tel quel”, sans garanties ni responsabilité, ce qui maintient la conformité claire et légère pour les développeurs individuels et les entreprises. Cette combinaison de flexibilité et de simplicité est une des principales raisons pour lesquelles la licence MIT est l'une des licences les plus populaires pour les projets open source.
Pourquoi le code source est-il ouvert ?
L'ouverture du lecteur sous licence MIT permet un développement transparent, réduit le risque de verrouillage des fournisseurs et permet des améliorations basées sur des écosystèmes riches et largement utilisés, tels que les lecteurs HTML5. Une licence permissive facilite l'intégration du lecteur dans des piles commerciales ou fermées tout en contribuant toujours des corrections de bugs ou des améliorations souhaitées. Cette approche correspond à l'évolution des capacités de lecture et des interfaces utilisateur de MYETV pour divers environnements.
Architecture principale
Le lecteur est basé sur les médias HTML5 et les API web standard, offrant une compatibilité étendue et un déploiement simple sur les navigateurs et les vues web modernes. Grâce aux pistes et aux commandes standardisées, il prend en charge les sous-titres, les chapitres et les améliorations de l'interface utilisateur sans dépendances de runtime propriétaires. Le résultat est un comportement prévisible, une extensibilité et une base stable pour les fonctionnalités et l'optimisation des performances personnalisées.
Options JavaScript
- Initialisation de la lecture : les URL de source, l'autodémarrage, la préchargement, la boucle, la désactivation du son, le mode plein écran et les logos de marque et d'eau-mark sont des propriétés familières HTML5 pour une configuration prévisible.
- Configuration de l'interface utilisateur : les options pour la visibilité de la barre de contrôle, la disposition des boutons, le comportement du clavier, les délais d'inactivité et les légendes offrent un contrôle précis des schémas d'interaction.
- Media handling: qualité de sélection, menus de lecture-taux, et menus de piste (audio/sous-titres) suivent les meilleures pratiques vues dans les lecteurs et les ensembles d’outils établis.
- Appels de rappel d’événements : onReady, onPlay, onPause, onEnded, onError, onRateChange, onQualityChange, onCaptionChange permettent l’orchestration au niveau de l’application et les crochets d’analyse.
Thèmes SCSS et CSS
Les variables de thème et les crochets de classe CSS permettent des couleurs, une typographie, un espacement, des rayons de coin et une iconographie personnalisés, permettant une alignement sans effort avec les systèmes de marque des produits. Plusieurs peaux sont prises en charge via des feuilles de style légères afin qu’une seule construction puisse présenter différents looks sur les propriétés ou les locataires. Les éléments de marque tels qu’un petit logo de coin ou un filigrane peuvent être appliqués via des options ou des superpositions CSS.
Logos entièrement personnalisables
Le lecteur dispose de logos et de filigranes entièrement personnalisables. Logo de marque : Situé à droite de la barre de contrôle, il peut être affiché à gauche des boutons. Il peut être défini avec une URL d’image (taille recommandée : hauteur 44 px - largeur 120 px), un lien personnalisé et il existe une option spécifique pour l’afficher ou non. Fil d’image : Positionné comme souhaité sur la vidéo, il peut être défini avec une URL d’image (taille recommandée : largeur : 180px, hauteur : 100px), un lien, une légende de lien et il existe une option pour définir sa position (haut à gauche, haut à droite, bas à gauche, bas à droite).
Les logos sont facultatifs, ils prennent en charge une API étendue et ils sont déjà insérés en tant qu’option lors de l’initialisation du lecteur, de sorte qu’aucun plugin n’est nécessaire.
Sous-titres : VTT et SRT
Le lecteur prend en charge les pistes de texte avec WebVTT pour les sous-titres et les sous-titres, y compris les menus multilingues et le style, en utilisant le modèle de piste standard utilisé sur le web. Les fichiers WebVTT sont faciles à rédiger et à maintenir et conviennent bien aux sous-titres et aux chapitres, ce qui en fait un bon choix pour les pipelines de production. Les workflows qui proviennent de SRT peuvent être accommodés en les convertissant en VTT ou en utilisant des processus d’ingestion qui produisent les deux formats pour une compatibilité maximale.
Chapitres avec images
Les chapitres sont activés via des pistes de chapitre WebVTT, permettant une navigation rapide à travers le contenu de longue durée avec des segments clairement étiquetés. Le lecteur peut afficher des aperçus visuels et des vignettes d’images à côté des entrées de chapitre pour rendre la navigation plus intuitive et engageante pour les publics. Cette approche simplifie l’édition du contenu : les producteurs mettent à jour une VTT et des images latérales, et l’interface utilisateur des chapitres se rafraîchit automatiquement.
Boutons de la barre de contrôle
- Lecture : la lecture/la pause, la recherche, la lecture à nouveau et l’affichage du temps sont présents avec des raccourcis clavier pour la navigation efficace.
- Audio : l’extinction/la remise en marche et le curseur de volume assurent un contrôle audio constant, avec des menus de piste audio optionnels lorsqu’il existe plusieurs pistes.
- Affichage : la pleine largeur et la miniature en plein écran s’intègrent aux capacités du navigateur, et les modes théâtre ou ajustement aident à correspondre aux besoins de mise en page.
- Qualité et vitesse : les menus de débit binaire/qualité et la sélection du débit de lecture offrent une agence à l’utilisateur pour les préférences réseau et de compréhension.
- Sous-titres : un menu de sous-titres fournit des commutateurs marche/arrêt et la sélection de pistes, avec un style conforme aux directives d’accessibilité.
- Surcharge : un menu “plus” personnalisable abrite les paramètres avancés et les actions pilotées par des plugins pour maintenir l’interface utilisateur axée.
Lecteur audio avec visualisation d’onde
Le lecteur peut également être utilisé comme lecteur audio uniquement et dispose d’un système d’affichage de forme d’onde audio intégré sans avoir besoin de plugins ; le système peut toujours être personnalisé en construisant des plugins distincts. Deux options sont définies lors de l’initialisation du lecteur : “audiofile” (vrai ou faux) configure le lecteur en tant que lecteur audio, tandis que “audiowave” (vrai ou faux) affiche la forme d’onde audio dans l’espace vidéo.
Système de plugins
L’architecture de plugin expose des crochets de cycle de vie, des points d’injection d’interface utilisateur et des abonnements d’événements afin que de nouvelles fonctionnalités puissent être ajoutées sans créer de branche principale. Des exemples incluent les balises d’analyse, les intégrations publicitaires via des SDK standardisés, les superpositions d’écrêtures, et les boutons personnalisés pour des actions spécifiques au domaine. Cela reflète des écosystèmes ouverts réussis où des paquets communautaires étendent les capacités du lecteur au fil du temps.
API développeur
Une API concise permet un contrôle impératif de la lecture, de la pause, de la recherche, du volume, de la désactivation du son, du débit de lecture, de la source, des pistes, de l’état et des promesses ready/error pour un démarrage en douceur. Les émetteurs d’événements reflètent la sémantique HTML5, de sorte que le code de l’application peut réagir aux modifications du lecteur, au tampon, aux erreurs, aux commutations de piste, aux commutations de qualité et aux transitions plein écran. La configuration peut être fournie via JavaScript ou des attributs de données, permettant ainsi des modèles d’initialisation déclaratifs et programmatiques.
Fonctionnalités d’accessibilité
Les sous-titresWebVTT et les pistes de chapitre améliorent l’accessibilité et la compréhension tout en permettant la navigation par clavier dans l’interface utilisateur du lecteur. Des états de mise au point clairs, un contraste lisible et un style de sous-titre réglable prennent en charge des expériences inclusives par défaut. La prise en charge multilingue suit les métadonnées de piste et s’aligne sur les pratiques utilisées par les lecteurs de bureau et de télévision établis.
Thèmes et branding à grande échelle
Les variables CSS globales permettent des échanges rapides de couleurs et de typographie afin que les marques puissent maintenir une identité cohérente sur les lecteurs intégrés dans plusieurs sites ou applications. Les schémas de peaufinage fournissent une séparation plus importante entre la logique et le style, simplifiant la maintenance et l’itération de conception à long terme. Les organisations peuvent standardiser les mises en page et les comportements grâce à des presets de thème tout en conservant de la place pour les surcharges par page.
Flux de production
L’utilisation de fichiers VTT de côté pour les sous-titres et les chapitres simplifie la publication continue : les éditeurs envoient des pistes de texte mises à jour sans réencoder les médias. Un schéma similaire s’applique aux vignettes de prévisualisation et aux images d’écran de fin, qui peuvent être échangées indépendamment des fichiers vidéo pour une itération rapide de l’interface utilisateur. Ces conventions s’alignent sur les pratiques largement adoptées dans les pipelines de diffusion vidéo professionnels.
Pourquoi cette approche fonctionne
Les lecteurs sont basés sur des normes, ils sont plus faciles à déboguer, à thémiser et à étendre, et ils s’intègrent bien avec les flux de travail CI/CD modernes et les systèmes de conception. Une licence permissive, associée à un noyau convivial aux plugins, invite les contributions et les intégrations qui bénéficient aux équipes de produits et à la communauté plus large. Au fil du temps, cet effet d’écosystème cumulatif produit de meilleures fonctionnalités, de meilleures documentation et une plus grande stabilité pour tous.
Disponibilité
Le code du lecteur sera publié en tant que code source sous la licence MIT dans le dépôt GitHub officiel, invitant les problèmes, les demandes de tirage et les discussions de la part des développeurs et des intégrateurs. La simplicité de la licence facilite l’intégration du lecteur dans divers projets tout en honorant l’attribution et en préservant le texte de la licence. La documentation et les exemples accompagneront la publication afin d’accélérer l’adoption et la personnalisation.
Une note pour les utilisateurs de MYETV
Ce projet s’appuie sur des améliorations itératives sur plusieurs années pour la lecture sur la plateforme MYETV, y compris la personnalisation de l’interface utilisateur et les extensions de lecteur qui ont pris en charge le positionnement et les expériences de visionnement évolutives. La publication en open source du lecteur formalise ces progrès et facilite son adoption, son extension et sa maintenance dans les environnements web et TV. MYETV est la base de feuille de route communautaire durable pour les fonctionnalités et les intégrations à venir.
Liste de contrôle des fonctionnalités
- Lecture HTML5 avec des pistes et des commandes basées sur des normes pour une compatibilité avec les navigateurs large.
- Sous-titres avec WebVTT, menus multi-pistes et flux d’écriture de VTT convivial pour la production ; les flux de travail SRT pris en charge par la conversion ou les pipelines.
- Chapitres avec des segments étiquetés et des aperçus miniatures facultatifs pour la navigation longue durée.
- Thématisation via des variables CSS, des peaux et des éléments de marque tels que des filigranes ou des logos de coins.
- Commandes complètes : lecture/pause, recherche, temps, volume, extinction, sous-titres, qualité, vitesse, plein écran, image dans l’image.
- Architecture de plugin pour l’analyse, la publicité, les filigranes et les boutons personnalisés sans créer de branche du noyau.
- Prise en charge de la diffusion HLS ou DASH pour la compatibilité avec tous les flux audio/vidéo.
- API claire pour le contrôle impératif, les événements et l’initialisation déclarative via des attributs.
- Publication open source sous licence MIT pour encourager la collaboration et une réutilisation flexible.
Conclusion
Laisser le lecteur MYETV sous la licence MIT invite la communauté à aider à façonner une expérience de lecture axée, rapide et extensible que les équipes peuvent faire confiance en production. Avec des sous-titres robustes, des chapitres, un thème, des plugins et une API propre, il est conçu pour être une base fiable pour les applications web et TV d'aujourd'hui.
