HN vorgestellt: Winamp und andere Media-Player, fürs Web als Web Components neu umgesetzt

 (player.style)
3 Punkte von GN⁺ 2024-10-09 | 1 Kommentare | Auf WhatsApp teilen

Player-Stile

  • Einführung

    • player.style ist eine Sammlung von Video- und Audio-Player-Themes von MuxThemes und bietet Themes, die für alle Web-Player und Web-App-Frameworks geeignet sind.
    • Nutzer können ein Player-Theme auswählen, das ihnen gefällt, dann den Player und das App-Framework wählen und anschließend die Details der Player-UI mit HTML und CSS anpassen.

  • Theme-Filter

    • Die verschiedenen Themes lassen sich nach Medienart, Video, Audio und Framework (HTML, React, Next.js, Vue, Svelte) filtern.

  • Hauptfunktionen

    • Geboten werden Funktionen wie Timeline-Thumbnails, Kapitel, Tooltips, Theme-Farbeinstellungen (primär, sekundär, Akzent), Wiedergabegeschwindigkeit, Qualität und Untertitel/CC.

  • Theme-Beispiele

    • Sutro: Ein elegantes und modernes Theme, inspiriert von SF-TV-Antennen.
    • Instaplay: Ein Mobile-First-Theme, inspiriert vom Wiedergabeerlebnis beliebter Social-Media-Apps.
    • Notflix: Ein Theme, abgesehen vom großen roten N und dem langen Bus nach Los Gatos.
    • Reelplay: Ein nostalgischer Media-Player, inspiriert von Media-Playern vergangener Zeiten.
    • Vimeonova: Eine frische Interpretation des klassischen Vimeo-Player-Designs.
    • YTV: Eine Hommage an den modernen und universellen YouTube-Player.
    • Tailwind Audio: Ein sauberes und minimalistisches Audio-Player-Theme, erstellt mit Tailwind CSS.
    • Demuxed 2022: Ein Media-Player-Theme, das für Demuxed 2022 erstellt wurde.
    • Microvideo: Ein Theme, das für kurze Inhalte optimiert ist und keine leistungsstarken Wiedergabesteuerungen benötigt, wie sie bei langen Inhalten nötig sind.
    • Minimal: Ein Theme, das das Mux-Player-Erlebnis mit minimalen Steuerelementen vereinfacht.
    • Winamp: Ein Retro-Theme, inspiriert vom klassischen Winamp-Media-Player.

Zusammenfassung von GN⁺

  • player.style ist eine nützliche Ressource, die Themes für verschiedene Web-Player und App-Frameworks bereitstellt und so die User Experience verbessern kann.
  • Jedes Theme basiert auf einer bestimmten Inspiration oder Designphilosophie und kann so unterschiedliche Nutzerpräferenzen bedienen.
  • Diese Themes lassen sich mit HTML und CSS einfach anpassen und bieten Entwicklern dadurch Flexibilität.
  • Andere Projekte mit ähnlichen Funktionen sind etwa Video.js oder Plyr; auch sie bieten vielfältige Anpassungsoptionen.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-10-09
Hacker-News-Kommentare

  • Dank für die unter der MIT-Lizenz bereitgestellte Idee; es werden Web Components für die Entwicklung von Medien-Apps verwendet. Zuvor wurde auf JavaScript umgestellt, aber inzwischen funktionieren Web Components gut.

    • Die Designprinzipien und Architektur-Notizen von Media Chrome gefallen, es gibt jedoch Bedenken hinsichtlich Erweiterbarkeit und Dateigröße.
    • Es wird darauf hingewiesen, dass im Repository media-elements keine Lizenzdatei vorhanden ist und eine explizite LICENSE-Datei nötig ist.
    • Die Media-Chrome-Bibliothek würde man gern verwenden und plant, die Idee zu übernehmen, eigene Komponenten in ein Media-Controller-Element einzubetten.

  • Es gibt eine Frage zur Implementierung eines Players, der wie Adobe Premiere schnelles und flüssiges Scrubbing zusammen mit Audio unterstützt.

    • Vermutung: Dafür wäre eine 16-kHz-Mono-Audiospur und ein 1-fps-Sprite oder ein 240p-Videoformat erforderlich.

  • Bei der Entwicklung von Anwendungen sollte user-select: none; aus Sicht des Kommentars zwingend gesetzt werden.

    • Es wird erwähnt, dass eine bestimmte Theme-Leiste auswählbar ist, und für die Arbeit gedankt.

  • Die Marketingstrategie von Mux wird als hervorragend bewertet.

    • Das Unternehmen übernimmt Open-Source-Projekte oder erstellt neue, damit Entwickler mit Mux in Berührung kommen.
    • Als Beispiel wird React Player genannt.

  • Player.style wird als großartig bewertet; erwähnt wird auch, dass man in einem früheren Startup einmal versucht habe, selbst ein Video.js-Theme zu bauen, am Ende aber bei den Standardwerten geblieben sei.

    • Danke fürs Teilen.

  • Es wird auf Probleme rund um den Video-Fokus hingewiesen und konstruktive Kritik geäußert.

    • Nach einem Klick auf das Video ist Scrubbing mit den linken und rechten Pfeiltasten möglich, nach einem Klick auf den Scrubber jedoch nicht.
    • Nach einem Klick auf leeren Raum funktionieren keine der Controls mehr.

  • Dank für die schöne Arbeit und Glückwunsch dazu, dass sie als FOSS bereitgestellt wurde.

  • Es wird positiv bewertet, dass Mux Web Components gut einsetzt.

  • Es wird vorgeschlagen, einen Stil hinzuzufügen, der das Video nicht verdeckt; das Projekt selbst wird als großartig bewertet.

  • Das Projekt gefällt, und es wird um das Hinzufügen von Untertitelspuren gebeten.

    • Derzeit gibt es keine Dokumentation, und da Media Chrome eine andere Syntax verwendet, ist das Hinzufügen schwierig.