HN presenta: Winamp y otros reproductores multimedia reimaginados para la web con Web Components

Estilos de reproductor

• Introducción

  • player.style es una colección de temas para reproductores de video y audio de MuxThemes, que ofrece temas adecuados para cualquier reproductor web y framework de apps web.
  • Los usuarios pueden elegir el tema de reproductor que más les guste, seleccionar su reproductor y framework de app, y luego personalizar los detalles de la interfaz del reproductor usando HTML y CSS.

• Filtro de temas

  • Los distintos temas se pueden filtrar por medio, video, audio y framework (HTML, React, Next.js, Vue, Svelte).

• Funciones principales

  • Ofrece funciones como miniaturas en la línea de tiempo, capítulos, tooltips, configuración de colores del tema (primario, secundario, de acento), velocidad de reproducción, calidad y subtítulos/CC.

• Ejemplos de temas

  • Sutro: un tema elegante y moderno inspirado en una antena de TV de ciencia ficción.
  • Instaplay: un tema mobile-first inspirado en la experiencia de reproducción de una popular app de redes sociales.
  • Notflix: un tema con la excepción de la gran N roja y el largo autobús hacia Los Gatos.
  • Reelplay: un reproductor multimedia nostálgico inspirado en los reproductores del pasado.
  • Vimeonova: una reinterpretación fresca del diseño clásico del reproductor de Vimeo.
  • YTV: un homenaje al reproductor moderno y universal de YouTube.
  • Tailwind Audio: un tema de reproductor de audio limpio y minimalista hecho con Tailwind CSS.
  • Demuxed 2022: un tema de reproductor multimedia creado para Demuxed 2022.
  • Microvideo: un tema optimizado para contenido corto, sin necesidad de los potentes controles de reproducción requeridos para contenido largo.
  • Minimal: un tema que simplifica la experiencia de Mux Player con controles mínimos.
  • Winamp: un tema retro inspirado en el clásico reproductor multimedia Winamp.

Resumen de GN⁺

• player.style es un recurso útil que puede mejorar la experiencia de usuario al ofrecer temas adecuados para distintos reproductores web y frameworks de apps.
• Cada tema está creado con una inspiración o filosofía de diseño específica, por lo que puede satisfacer distintos gustos de los usuarios.
• Estos temas se pueden personalizar fácilmente con HTML y CSS, lo que brinda flexibilidad a los desarrolladores.
• Otros proyectos con funciones similares incluyen Video.js y Plyr, que también ofrecen varias opciones de personalización.

[GN⁺]

Comentarios de Hacker News

• Agradece la idea publicada bajo licencia MIT y comenta que está usando web components para desarrollar una app de medios. Antes se había pasado a JavaScript, pero actualmente los web components le están funcionando bien.

  • Le gustan los principios de diseño y las notas de arquitectura de Media Chrome, y le preocupan la extensibilidad y el tamaño de los archivos.
  • Señala que el repositorio media-elements no tiene un archivo de licencia y que hace falta un archivo LICENSE explícito.
  • Le gustaría usar la librería Media Chrome y planea tomar la idea de envolver sus propios componentes con un elemento controlador de medios.

• Hay una pregunta sobre cómo implementar un reproductor que permita scrubbing rápido y fluido con audio, como Adobe Premiere.

  • Supone que haría falta una pista de audio mono de 16khz y un sprite de 1fps o un formato de video 240p.

• Considera que al desarrollar aplicaciones debería ser obligatorio configurar user-select: none;.

  • Menciona que cierta barra de tema se puede seleccionar y agradece el trabajo.

• Evalúa como excelente la estrategia de marketing de Mux.

  • Adquieren proyectos open source o crean nuevos para que los desarrolladores conozcan Mux.
  • Menciona ejemplos como React Player.

• Considera que Player.style es excelente y comenta que en una startup anterior intentó crear directamente un tema para video.js, pero terminó usando el predeterminado.

  • Agradece que lo hayan compartido.

• Señala problemas relacionados con el foco del video y ofrece una crítica constructiva.

  • Al hacer clic en el video se puede hacer scrubbing con las flechas izquierda y derecha, pero al hacer clic en el scrubber no funciona.
  • Al hacer clic en un espacio vacío, ningún control funciona.

• Agradece el hermoso trabajo y felicita que se haya publicado como FOSS.

• Considera que en Mux están aprovechando muy bien los web components.

• Sugiere agregar un estilo que no tape el video y considera que el proyecto en sí es excelente.

• Le gusta el proyecto y pide que se agreguen pistas de subtítulos.

  • Actualmente no hay documentación y Media Chrome usa una sintaxis distinta, así que es difícil agregarlas.