Repolode
Enviar
muxinc

muxinc/media-chrome

Controles personalizáveis para players de áudio e vídeo, criados como web components nativos que funcionam em qualquer framework JavaScript.

Alternativa open source a:YouTube Player

Ver no GitHubSite
Estrelas
2,758
Forks
128
Issues abertas
10
Último commit
anteontem

O que é?

Media Chrome é um conjunto de elementos customizados nativos para criar controles de players de mídia, como botões de reprodução, controles deslizantes de volume e tempo e opções para alternar entre tela cheia e picture-in-picture. Os controles são tags HTML comuns, então basta editar o markup para adicioná-los ou removê-los, e eles são estilizados com CSS comum.

Os controles funcionam com elementos <video> e <audio> padrão e com vários players de terceiros, como YouTube e HLS.js. Como são web components, funcionam em React, Angular, Svelte e outros frameworks sem integração especial. O projeto também publica componentes wrapper para React para seus elementos principais.

O Media Chrome é mantido pela Mux e distribuído pelo npm e por uma versão para CDN, que pode ser carregada com uma única tag de script.

Recursos principais

  • 01Criado com elementos customizados nativos, funciona sem depender de um framework específico.
  • 02Funciona com elementos padrão de vídeo e áudio e com vários players de terceiros.
  • 03Os controles são adicionados ou removidos usando tags HTML comuns.
  • 04Estilizado com CSS comum.
  • 05Oferece componentes wrapper para React para os elementos principais.

Casos de uso

  • Criar um player de vídeo com estilo personalizado que combine com o design de um site.
  • Adicionar controles de reprodução consistentes em sites que usam várias bibliotecas de players.
  • Criar um player de áudio com controles de reprodução, busca e velocidade de reprodução em um app web.

Início rápido

  1. 1

    Carregue o Media Chrome pela CDN do jsDelivr usando a tag de script module na sua página HTML

  2. 2

    Envolva o elemento video ou audio com media-controller e adicione media-control-bar com os elementos de controle

Antes de usar

  • O README recomenda o Video.js para novos projetos, e o Media Chrome é mantido junto com ele.

Em coleções

Frameworks frontend e componentes de interface

Tópicos

#web-components#video-player#audio-player#ui-components#frontend-ui#custom-elements#html-video#audio#media-chrome#mux

Perguntas frequentes

O que é media-chrome?
Controles personalizáveis para players de áudio e vídeo, criados como web components nativos que funcionam em qualquer framework JavaScript. Media Chrome é um conjunto de elementos customizados nativos para criar controles de players de mídia, como botões de reprodução, controles deslizantes de volume e tempo e opções para alternar entre tela cheia e picture-in-picture. Os controles são tags HTML comuns, então basta editar o markup para adicioná-los ou removê-los, e eles são estilizados com CSS comum.
media-chrome é gratuito? Qual é a licença?
media-chrome é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
media-chrome ainda é mantido?
Manutenção ativa. O último commit de media-chrome foi em 23 de out. de 2026.
Para que posso usar media-chrome?
Criar um player de vídeo com estilo personalizado que combine com o design de um site. Adicionar controles de reprodução consistentes em sites que usam várias bibliotecas de players. Criar um player de áudio com controles de reprodução, busca e velocidade de reprodução em um app web.
Como instalar media-chrome?
Carregue o Media Chrome pela CDN do jsDelivr usando a tag de script module na sua página HTML Envolva o elemento video ou audio com media-controller e adicione media-control-bar com os elementos de controle
Onde consigo media-chrome?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/muxinc/media-chrome

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados