Repolode
Submit
muxinc

muxinc/media-chrome

Customizable audio and video player controls built as native web components that work in any JavaScript framework.

Open-source alternative to:YouTube Player

View on GitHubWebsite
Stars
2,758
Forks
128
Open issues
10
Last commit
2 days ago

What is it?

Media Chrome is a set of native custom elements for building media player controls such as play buttons, volume and time ranges, fullscreen and picture-in-picture toggles. Controls are plain HTML tags, so adding or removing them is a matter of editing markup, and they are styled with ordinary CSS.

The controls work with standard <video> and <audio> elements and with a number of third-party players such as YouTube and HLS.js. Because they are web components, they run in React, Angular, Svelte and other frameworks without special integration, and the project also publishes React wrapper components for its core elements.

Media Chrome is maintained by Mux and is distributed through npm and a CDN build that can be loaded with a single script tag.

Key features

  • 01Built on native custom elements, so it works without a specific framework.
  • 02Works with standard video and audio elements and several third-party players.
  • 03Controls are added or removed with plain HTML tags.
  • 04Styled with plain CSS.
  • 05Provides React wrapper components for core elements.

Use cases

  • Building a custom-styled video player that matches a website's design.
  • Adding consistent playback controls across sites that use several player libraries.
  • Creating an audio player with play, seek and playback-rate controls in a web app.

Quick start

  1. 1

    Load Media Chrome from the jsDelivr CDN with the module script tag in your HTML page

  2. 2

    Wrap your video or audio element in media-controller and add media-control-bar with the control elements

Things to know

  • The README recommends Video.js for new projects, and Media Chrome is maintained alongside it.

In collections

Frontend frameworks & UI components

Topics

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

FAQ

What is media-chrome?
Customizable audio and video player controls built as native web components that work in any JavaScript framework. Media Chrome is a set of native custom elements for building media player controls such as play buttons, volume and time ranges, fullscreen and picture-in-picture toggles. Controls are plain HTML tags, so adding or removing them is a matter of editing markup, and they are styled with ordinary CSS.
Is media-chrome free to use? What license does it have?
media-chrome is open source under the MIT license. Check the license terms before using it in commercial products.
Is media-chrome still maintained?
Actively maintained. The last commit to media-chrome was on Oct 23, 2026.
What can I use media-chrome for?
Building a custom-styled video player that matches a website's design. Adding consistent playback controls across sites that use several player libraries. Creating an audio player with play, seek and playback-rate controls in a web app.
How do I install media-chrome?
Load Media Chrome from the jsDelivr CDN with the module script tag in your HTML page Wrap your video or audio element in media-controller and add media-control-bar with the control elements
Where can I get media-chrome?
The source code and installation instructions are on GitHub: https://github.com/muxinc/media-chrome

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects