Repolode
Enviar
muxinc

muxinc/media-chrome

Controles personalizables para reproductores de audio y video, creados como componentes web nativos que funcionan con cualquier framework de JavaScript.

Alternativa open source a:YouTube Player

Ver en GitHubSitio web
Estrellas
2,758
Forks
128
Issues abiertos
10
Último commit
anteayer

¿Qué es?

Media Chrome es un conjunto de elementos personalizados nativos para crear controles de reproductores multimedia, como botones de reproducción, controles deslizantes de volumen y tiempo, y opciones para activar la pantalla completa o la función picture-in-picture. Los controles son etiquetas HTML normales, así que agregarlos o quitarlos solo requiere editar el marcado, y se les aplica estilo con CSS convencional.

Los controles funcionan con elementos <video> y <audio> estándar, así como con varios reproductores de terceros, como YouTube y HLS.js. Como son componentes web, funcionan en React, Angular, Svelte y otros frameworks sin necesidad de una integración especial. Además, el proyecto publica componentes wrapper de React para sus elementos principales.

Mux mantiene Media Chrome y lo distribuye a través de npm y de una versión para CDN que se puede cargar con una sola etiqueta script.

Funciones clave

  • 01Está basado en elementos personalizados nativos, así que funciona sin depender de un framework específico.
  • 02Funciona con elementos de video y audio estándar y con varios reproductores de terceros.
  • 03Los controles se agregan o quitan con etiquetas HTML normales.
  • 04Se le aplica estilo con CSS convencional.
  • 05Ofrece componentes wrapper de React para los elementos principales.

Casos de uso

  • Crear un reproductor de video con estilos personalizados que siga el diseño de un sitio web.
  • Agregar controles de reproducción coherentes en sitios que usan varias bibliotecas de reproductores.
  • Crear en una aplicación web un reproductor de audio con controles de reproducción, búsqueda y velocidad de reproducción.

Inicio rápido

  1. 1

    Carga Media Chrome desde la CDN de jsDelivr usando la etiqueta de script module en tu página HTML

  2. 2

    Envuelve el elemento video o audio con media-controller y añade media-control-bar con los elementos de control

Antes de usarlo

  • El README recomienda Video.js para proyectos nuevos, y Media Chrome se mantiene junto con él.

En colecciones

Frameworks frontend y componentes de interfaz

Temas

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

Preguntas frecuentes

¿Qué es media-chrome?
Controles personalizables para reproductores de audio y video, creados como componentes web nativos que funcionan con cualquier framework de JavaScript. Media Chrome es un conjunto de elementos personalizados nativos para crear controles de reproductores multimedia, como botones de reproducción, controles deslizantes de volumen y tiempo, y opciones para activar la pantalla completa o la función picture-in-picture. Los controles son etiquetas HTML normales, así que agregarlos o quitarlos solo requiere editar el marcado, y se les aplica estilo con CSS convencional.
¿media-chrome es gratuito? ¿Qué licencia tiene?
media-chrome es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿media-chrome sigue mantenido?
Mantenimiento activo. El último commit de media-chrome fue el 23 oct 2026.
¿Para qué puedo usar media-chrome?
Crear un reproductor de video con estilos personalizados que siga el diseño de un sitio web. Agregar controles de reproducción coherentes en sitios que usan varias bibliotecas de reproductores. Crear en una aplicación web un reproductor de audio con controles de reproducción, búsqueda y velocidad de reproducción.
¿Cómo se instala media-chrome?
Carga Media Chrome desde la CDN de jsDelivr usando la etiqueta de script module en tu página HTML Envuelve el elemento video o audio con media-controller y añade media-control-bar con los elementos de control
¿Dónde consigo media-chrome?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/muxinc/media-chrome

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados