Présentation du joueur MYETV
Les MYETV Le lecteur vidéo est une expérience multimédia moderne, HTML5-first conçue pour le démarrage rapide, l'interface utilisateur propre, et la personnalisation profonde sur les surfaces Web et TV, en continuant la plate-forme de longue évolution des anciens lecteurs HTML5 à un outil entièrement ouvert et extensible. Construit sur des technologies web standard, il englobe des légendes, des chapitres, des thèmes, des plugins et une API JavaScript documentée afin que les équipes puissent intégrer, faire connaître et étendre la lecture de manière fiable sur tous les appareils. La base de code sera publiée en tant que source ouverte sous la licence MIT dans le dépôt officiel GitHub afin d'encourager l'examen, les contributions et la réutilisation de la communauté.
Lien Github: https://github.com/OskarCosimo/MYETV-video-player-opensource/
Lien de démonstration & #160;: https://oskarcosimo.com/MYETV-video-player/MYETV-player-demo.html
MIT Licence en un coup d'oeil
La licence MIT est une licence ouverte courte et permissive qui permet l'utilisation, la copie, la modification, la distribution, la sous-licence et l'utilisation commerciale, à condition que le copyright original et l'avis de licence soient conservés. Le logiciel est fourni comme suit, sans garantie ni responsabilité, 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 raison clé pour laquelle le MIT reste l'une des licences les plus populaires pour les projets open-source.
Pourquoi ouvrir une source
Open sourcing the player sous MIT permet un développement transparent, réduit le risque de verrouillage des fournisseurs, et permet des améliorations communautaires, y compris des plugins et des intégrations inspirés par des écosystèmes dynamiques vus dans les lecteurs HTML5 largement utilisés. La licence permissive permet d'intégrer facilement le lecteur dans des piles commerciales ou à source fermée tout en contribuant aux corrections de bogues ou améliorations comme désiré. Cette approche s'harmonise avec MYETVHistorique de l'évolution des capacités de lecture et d'interface utilisateur pour divers environnements.
Architecture de base
Le lecteur se concentre sur les médias HTML5 et les API web standard, offrant une large compatibilité et un déploiement simple sur les navigateurs modernes et les vues web. Grâce à des pistes et des contrôles basés sur les normes, il prend en charge les légendes, les chapitres et les améliorations de l'interface utilisateur sans dépendances d'exécution propriétaires. Le résultat est un comportement prévisible, une extensibilité et une base stable pour les fonctionnalités personnalisées et le réglage des performances.
Options JavaScript
- Initialisation de la lecture : URL(s) source(s), autoplay, preload, loop, muted, playsinline, logos de marque, logos filigranes et affiche miroir de propriétés HTML5 familières pour une configuration prévisible.
- Configuration UX : les options pour la visibilité de la barre de commande, la mise en page des boutons, le comportement du clavier, les chronométrages d'inactivité et les tooltips permettent un contrôle fin des modèles d'interaction.
- Manipulation des médias : sélection de qualité, menus de lecture et menus de piste (audio/caption) suivent les meilleures pratiques observées dans les joueurs établis et les outils.
- Callbacks de l'événement: onReady, onPlay, onPause, onEnd, onError, onRateChange, onQualité Change, onCaptionChange active l'orchestration et les crochets d'analyse au niveau de l'application.
Thème SCSS et CSS
Les variables thématiques et les crochets de classe CSS permettent des couleurs personnalisées, la typographie, l'espacement, les rayons d'angle et l'iconographie, permettant un alignement sans faille avec les systèmes de marque de produit. Plusieurs peaux sont prises en charge par des feuilles de style légères afin qu'une seule construction puisse présenter différents looks à travers les propriétés ou les locataires. Des éléments de marque tels qu'un petit coin logo ou filigrane peuvent être appliqués par des options ou des superpositions CSS.
Logos entièrement personnalisables
Le lecteur dispose de logos et de filigranes de marque entièrement personnalisables.
Logo de marque: Situé à droite de la barre de commande, il peut être affiché à gauche des boutons. Il peut être configuré avec une URL image (taille recommandée: hauteur 44px – largeur 120px), un lien personnalisé, et il existe une option spécifique pour l'afficher ou non.
Logo de filigrane: Positionné comme désiré sur la vidéo, il peut être défini avec une URL d'image (dimension recommandée: largeur: 180px, hauteur: 100px), un lien, une légende de lien, et il ya une option pour définir sa position (en haut à gauche, en haut à droite, en bas à gauche, en bas à droite).
Les logos sont optionnels, ont une large prise en charge de l'API et ils sont déjà insérés en option lorsque le lecteur initialise, donc aucun plugin n'est nécessaire.
Légendes: VTT et TTS
Le lecteur prend en charge les pistes texte avec WebVTT pour les légendes et sous-titres, y compris les menus multilingues et le style, en tirant parti du modèle de piste standard utilisé sur le Web. Les fichiers WebVTT sont faciles à écrire et à entretenir, et sont bien adaptés pour les sous-titres et les chapitres, ce qui en fait un ajustement naturel pour les pipelines de production. Les flux de travail qui proviennent de SRT peuvent être pris en charge en 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 les pistes de chapitres WebVTT, permettant une navigation rapide à travers le contenu de forme longue avec des segments clairs et étiquetés. Le lecteur peut afficher des aperçus visuels et des vignettes d'image à côté des entrées de chapitre pour rendre la navigation plus intuitive et engageante pour le public. Cette approche simplifie l'édition du contenu — les producteurs mettent à jour un VTT sidecar et des images, et le chapitre UI se rafraîchit automatiquement.
Boutons de la barre de commande
- Playback: play/pause, search, replay, and time displays sont présents avec des raccourcis clavier pour une navigation efficace.
- Audio: le slider mute/unmute et le volume assurent un contrôle sonore cohérent, avec des menus audio en option lorsque plusieurs pistes sont présentes.
- Vue: plein écran et image en image s'intègrent aux fonctionnalités du navigateur, et les modes de théâtre ou d'ajustement en option aident à répondre aux besoins de mise en page.
- Qualité et rapidité : les menus de qualité et de débit et la sélection de taux de lecture fournissent une agence utilisateur pour les préférences de réseau et de compréhension.
- Légendes : un menu de sous-titres fournit des toggles et des pistes de sélection, avec un style aligné sur les conseils d'accessibilité.
- Dépassement : un menu personnalisable Plus d'informations contient des paramètres avancés et des actions pilotées par plugin pour garder l'interface utilisateur concentrée.
Lecteur audio avec visualisation d'onde
Le lecteur peut également être utilisé comme un lecteur audio seulement et dispose d'un système d'affichage de forme d'onde audio intégré sans besoin de plugins; le système peut encore être personnalisé en construisant des plugins séparés. Deux options sont définies lors de l'initialisation du lecteur : le fichier audio (vrai ou faux) configurera le lecteur comme un lecteur audio, tandis que le fichier audio (vrai ou faux) affichera la forme d'onde audio dans l'espace vidéo.
Système de connexion
L'architecture du plugin expose les hameçons de cycle de vie, les points d'injection de l'interface utilisateur et les abonnements d'événements, de sorte que de nouvelles fonctionnalités peuvent être ajoutées sans forking core. Les exemples comprennent les balises analytiques, les intégrations publicitaires via des SDK normalisés, les superpositions de filigrane et les boutons personnalisés pour des actions spécifiques au domaine. Cela reflète le succès des écosystèmes ouverts où les paquets communautaires augmentent les capacités des joueurs au fil du temps.
API développeur
Une API concise permet un jeu de contrôle impératif, une pause, une recherche, un setVolume, un setMuted, un setPlaybackRate, un setSource(s), un setTrack(s), et un getState plus des promesses de prêt/erreur pour un bootstraping lisse. Evénement émetteurs miroir HTML5 sémantique afin que le code app puisse réagir aux changements de tête de lecture, tampon, erreurs, toggles de piste, commutateurs de qualité, et transitions plein écran. La configuration peut être fournie via JavaScript ou des attributs de données, permettant à la fois les modèles d'initialisation déclarative et programmatique.
Caractéristiques d'accessibilité
Les légendes WebVTT et les pistes de chapitres améliorent l'accessibilité et la compréhension tout en permettant une navigation conviviale au clavier dans l'interface utilisateur du lecteur. Des états de mise au point clairs, un contraste lisible et une légende réglable supportent des expériences inclusives par défaut. Le support multilingue suit les métadonnées et s'harmonise avec les pratiques utilisées par les lecteurs de bureau et de télévision établis.
Le thème et la marque à l'échelle
Les variables CSS mondiales permettent des échanges rapides de couleurs et de typographie afin que les marques puissent maintenir une identité cohérente entre les joueurs intégrés dans plusieurs sites ou applications. Les motifs de skinning assurent une plus grande séparation entre la logique et le style, simplifient l'entretien et la conception à long terme. Les organisations peuvent normaliser les mises en page et les comportements à travers des préréglages thématiques tout en préservant la place pour les dépassements par page.
Flux de production
L'utilisation des fichiers VTT sidecar pour les légendes et les chapitres simplifie la publication continue : les éditeurs expédient des pistes de texte mises à jour sans réencodage des médias. Un modèle similaire s'applique aux vignettes de prévisualisation et aux images d'affiches, qui peuvent être échangées indépendamment des fichiers vidéo pour l'itération rapide de l'interface utilisateur. Ces conventions s'harmonisent avec les pratiques largement adoptées en matière de transmissions vidéo professionnelles.
Pourquoi cette approche fonctionne
Lean, les joueurs basés sur les normes sont plus faciles à déboguer, thème et étendre, et ils s'adaptent bien avec les flux de travail modernes de CI/CD et de système de conception. Une licence permissive ainsi qu'un noyau accessible aux plugins invite à des contributions et des intégrations qui profitent à la fois aux équipes de produits et à la communauté en général. Au fil du temps, cet effet composé de l'écosystème produit de meilleures caractéristiques, des documents et de la stabilité pour tous.
Disponibilité
Le code du lecteur sera publié sous forme d'open source sous la licence MIT dans le dépôt officiel GitHub, en invitant les problèmes, les demandes de tirage et les discussions des développeurs et intégrateurs. La simplicité de la licence rend simple d'intégrer le joueur à travers les projets tout en honorant l'attribution et en préservant le texte de la licence. Documentation et exemples accompagneront la publication pour accélérer l'adoption et la personnalisation.
Une note pour les utilisateurs MYETV
Ce projet s'appuie sur des années d'améliorations itératives à la lecture MYETV plate-forme, y compris la personnalisation de l'interface utilisateur et les extensions de lecteur qui ont soutenu l'image de marque et l'évolution des expériences de visualisation. Open sourcing le lecteur formalise ces progrès et facilite l'adoption, l'extension et le maintien dans les environnements web et TV MYETV sert. C'est le fondement d'une feuille de route durable axée sur la collectivité pour les caractéristiques et les intégrations à venir.
Liste de contrôle des caractéristiques
- Lecture HTML5-premier avec des pistes basées sur des normes et des contrôles pour une large compatibilité du navigateur.
- Sous-titrer avec WebVTT, des menus multi-pistes et des flux d'écriture de VTT favorables à la production; les flux de travail d'origine SRT pris en charge par la conversion ou les pipelines.
- Chapitres avec segments marqués et aperçus de vignettes optionnels pour la navigation longue forme.
- Le montage via des variables CSS, des peaux et des éléments de marque tels que des filigranes ou des logos d'angle.
- Contrôles complets: jeu/pause, chercher, temps, volume, muet, légendes, qualité, vitesse, plein écran, image en image.
- Architecture de plugin pour l'analyse, les annonces, les filigranes et les boutons personnalisés sans filer le noyau.
- Prise en charge du streaming HLS ou DASH pour la compatibilité avec tous les flux audio/vidéo
- Effacer l'API pour le contrôle impératif, les événements et l'initialisation déclarative via des attributs.
- Mise en libre pratique sous licence MIT pour encourager la collaboration et la réutilisation souple.
Clôture
Relâcher MYETV joueur sous la licence MIT invite la communauté à aider à façonner une expérience de lecture ciblée, rapide et extensible que les équipes peuvent faire confiance à la production. Avec des légendes robustes, des chapitres, des thèmes, des plugins et une API propre, il est conçu pour être une base fiable pour les applications web et TV d'aujourd'hui.
