HN em destaque: Winamp e outros players de mídia recriados para a web com Web Components

 (player.style)
3 pontos por GN⁺ 2024-10-09 | 1 comentários | Compartilhar no WhatsApp

Estilos de player

  • Introdução

    • player.style é uma coleção de temas de players de vídeo e áudio oferecida pela MuxThemes, com temas adequados para qualquer player web e framework de app web.
    • Os usuários podem escolher um tema de player de sua preferência, selecionar o player e o framework do app e então personalizar os detalhes da interface do player usando HTML e CSS.

  • Filtro de temas

    • Os vários temas podem ser filtrados por mídia, vídeo, áudio e framework (HTML, React, Next.js, Vue, Svelte).

  • Principais recursos

    • Oferece recursos como miniaturas na timeline, capítulos, tooltips, configuração de cores do tema (primária, secundária, destaque), velocidade de reprodução, qualidade e legendas/CC.

  • Exemplos de temas

    • Sutro: tema elegante e moderno inspirado em antenas de TV de ficção científica.
    • Instaplay: tema mobile-first inspirado na experiência de reprodução de apps populares de mídia social.
    • Notflix: um tema sem o grande N vermelho e sem o longo ônibus para Los Gatos.
    • Reelplay: player de mídia nostálgico inspirado nos players de mídia do passado.
    • Vimeonova: uma releitura renovada do design clássico do player do Vimeo.
    • YTV: uma homenagem ao player moderno e universal do YouTube.
    • Tailwind Audio: tema de player de áudio limpo e minimalista feito com Tailwind CSS.
    • Demuxed 2022: tema de player de mídia criado para o Demuxed 2022.
    • Microvideo: tema otimizado para conteúdo curto, sem necessidade dos controles de reprodução robustos exigidos por conteúdo longo.
    • Minimal: tema que simplifica a experiência do Mux Player com controles mínimos.
    • Winamp: tema retrô inspirado no player de mídia clássico Winamp.

Resumo do GN⁺

  • player.style é um recurso útil que pode melhorar a experiência do usuário ao oferecer temas adequados para vários players web e frameworks de app.
  • Cada tema foi criado com base em uma inspiração específica ou filosofia de design, podendo atender a diferentes preferências de usuários.
  • Esses temas podem ser facilmente personalizados com HTML e CSS, oferecendo flexibilidade para desenvolvedores.
  • Outros projetos com funções semelhantes incluem Video.js e Plyr, que também oferecem várias opções de personalização.

Leituras relacionadas

1 comentários

 
GN⁺ 2024-10-09
Comentário no Hacker News

  • Agradece pela ideia disponibilizada sob licença MIT e diz que está usando Web Components no desenvolvimento de apps de mídia. Antes havia migrado para JavaScript, mas agora Web Components estão funcionando bem.

    • Gosta dos princípios de design e das notas de arquitetura do Media Chrome, e tem preocupações com extensibilidade e tamanho dos arquivos.
    • Aponta que o repositório media-elements não tem arquivo de licença, e que é necessário um arquivo LICENSE explícito.
    • Diz que gostaria de usar a biblioteca Media Chrome e planeja adotar a ideia de envolver seus próprios componentes em um elemento controller de mídia.

  • Há uma pergunta sobre como implementar um player que suporte scrubbing rápido e suave com áudio, como no Adobe Premiere.

    • Supõe que seria necessária uma faixa de áudio mono de 16khz e um sprite de 1fps ou vídeo em formato 240p.

  • Acha que, ao desenvolver aplicações, definir user-select: none; deveria ser obrigatório.

    • Menciona que uma determinada barra de tema pode ser selecionada e agradece pelo trabalho.

  • Avalia que a estratégia de marketing da Mux é excelente.

    • Adquire projetos open source ou cria novos para que desenvolvedores conheçam a Mux.
    • Cita exemplos como React Player.

  • Avalia que o Player.style é excelente e comenta que, em uma startup anterior, tentou criar um tema próprio para video.js, mas acabou usando o padrão.

    • Agradece por compartilhar.

  • Aponta problemas relacionados ao foco do vídeo e faz críticas construtivas.

    • Ao clicar no vídeo, é possível fazer scrubbing com as setas esquerda e direita, mas isso não funciona ao clicar no scrubber.
    • Ao clicar em um espaço vazio, nenhum dos controles funciona.

  • Agradece pelo belo trabalho e parabeniza por tê-lo disponibilizado como FOSS.

  • Avalia que a Mux está usando Web Components muito bem.

  • Sugere adicionar um estilo que não cubra o vídeo, e avalia que o projeto em si é excelente.

  • Gostou do projeto e pede a adição de uma faixa de legendas.

    • Diz que atualmente não há documentação e que o Media Chrome usa uma sintaxe diferente, o que dificulta a adição.