HN dévoile : Winamp et d’autres lecteurs multimédias recréés pour le web avec des Web Components

 (player.style)
3 points par GN⁺ 2024-10-09 | 1 commentaires | Partager sur WhatsApp

Styles de lecteur

  • Introduction

    • player.style est une collection de thèmes de lecteurs vidéo et audio proposée par MuxThemes, avec des thèmes adaptés à tous les lecteurs web et frameworks d’applications web.
    • Les utilisateurs peuvent choisir un thème de lecteur qui leur plaît, sélectionner leur lecteur et leur framework d’application, puis personnaliser les détails de l’interface du lecteur avec HTML et CSS.

  • Filtres de thèmes

    • Les différents thèmes peuvent être filtrés par média, vidéo, audio et framework (HTML, React, Next.js, Vue, Svelte).

  • Fonctionnalités principales

    • Prise en charge des miniatures sur la timeline, des chapitres, des infobulles, des réglages de couleurs du thème (primaire, secondaire, accent), de la vitesse de lecture, de la qualité, ainsi que des sous-titres/CC.

  • Exemples de thèmes

    • Sutro : un thème élégant et moderne inspiré des antennes TV de San Francisco.
    • Instaplay : un thème mobile-first inspiré de l’expérience de lecture des applications populaires de réseaux sociaux.
    • Notflix : un thème sans le grand N rouge ni le long bus vers Los Gatos.
    • Reelplay : un lecteur multimédia nostalgique inspiré des lecteurs d’antan.
    • Vimeonova : une réinterprétation fraîche du design classique du lecteur Vimeo.
    • YTV : un hommage au lecteur YouTube moderne et universel.
    • Tailwind Audio : un thème de lecteur audio propre et minimaliste créé avec Tailwind CSS.
    • Demuxed 2022 : un thème de lecteur multimédia créé pour Demuxed 2022.
    • Microvideo : un thème optimisé pour les contenus courts, sans les contrôles de lecture avancés nécessaires aux contenus longs.
    • Minimal : un thème qui simplifie l’expérience Mux Player avec un minimum de contrôles.
    • Winamp : un thème rétro inspiré du lecteur multimédia classique Winamp.

Le point de vue de GN⁺

  • player.style est une ressource utile qui propose des thèmes adaptés à divers lecteurs web et frameworks d’applications, permettant d’améliorer l’expérience utilisateur.
  • Chaque thème est conçu à partir d’une inspiration ou d’une philosophie de design spécifique, ce qui permet de répondre à différents goûts d’utilisateurs.
  • Ces thèmes peuvent être facilement personnalisés avec HTML et CSS, ce qui offre de la flexibilité aux développeurs.
  • Parmi les autres projets proposant des fonctions similaires, on peut citer Video.js ou Plyr, qui offrent eux aussi diverses options de personnalisation.

À lire aussi

1 commentaires

 
GN⁺ 2024-10-09
Commentaire Hacker News

  • Merci pour cette idée proposée sous licence MIT ; j’utilise des web components pour développer des applications média. J’étais auparavant passé à JavaScript, mais aujourd’hui les web components fonctionnent bien.

    • J’aime les principes de conception et les notes d’architecture de Media Chrome, et j’ai des inquiétudes concernant l’évolutivité et la taille des fichiers.
    • Je remarque que le dépôt media-elements ne contient pas de fichier de licence ; un fichier LICENSE explicite est nécessaire.
    • J’aimerais utiliser la bibliothèque Media Chrome et je compte reprendre l’idée d’envelopper mes propres composants dans un élément media controller.

  • Question sur la manière d’implémenter un lecteur prenant en charge un scrubbing rapide et fluide avec l’audio, comme dans Adobe Premiere.

    • Il suppose qu’il faudrait une piste audio mono à 16khz et un sprite à 1fps ou un format vidéo en 240p.

  • Lors du développement d’une application, user-select: none; devrait selon moi être un réglage obligatoire.

    • Il mentionne qu’une certaine barre de thème peut être sélectionnée et remercie pour le travail.

  • La stratégie marketing de Mux est jugée excellente.

    • L’entreprise rachète des projets open source ou en crée de nouveaux pour faire découvrir Mux aux développeurs.
    • Des exemples comme React Player sont mentionnés.

  • Player.style est jugé excellent, et il est mentionné que dans une précédente startup, ils avaient essayé de créer eux-mêmes un thème vidéo.js avant de finir par utiliser la valeur par défaut.

    • Merci pour le partage.

  • Des problèmes liés au focus vidéo sont signalés avec une critique constructive.

    • En cliquant sur la vidéo, il est possible de faire du scrubbing avec les flèches gauche et droite, mais cela ne fonctionne pas après avoir cliqué sur le scrubber.
    • En cliquant dans un espace vide, aucun des contrôles ne fonctionne.

  • Merci pour ce magnifique travail, et félicitations pour l’avoir proposé en FOSS.

  • Mux est jugé comme faisant bon usage des web components.

  • Suggestion d’ajouter un style qui ne masque pas la vidéo, tout en jugeant le projet lui-même excellent.

  • Le projet plaît, et il est demandé d’ajouter une piste de sous-titres.

    • Il n’existe actuellement pas de documentation, et Media Chrome utilise une syntaxe différente, ce qui rend l’ajout difficile.