Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/muxinc/media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://github.com/muxinc/media-chrome

audio audio-player media-chrome mux ui-components video video-player web-components

Last synced: 21 days ago
JSON representation

Custom elements (web components) for making audio and video player controls that look great in your website or app.

Host: GitHub
URL: https://github.com/muxinc/media-chrome
Owner: muxinc
License: mit
Created: 2019-09-14T05:42:29.000Z (about 5 years ago)
Default Branch: main
Last Pushed: 2024-04-12T14:09:31.000Z (7 months ago)
Last Synced: 2024-04-14T05:02:53.927Z (7 months ago)
Topics: audio, audio-player, media-chrome, mux, ui-components, video, video-player, web-components
Language: JavaScript
Homepage: https://media-chrome.org
Size: 66.7 MB
Stars: 1,009
Watchers: 25
Forks: 51
Open Issues: 10
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

awesome-github-repos - muxinc/media-chrome - Custom elements (web components) for making audio and video player controls that look great in your website or app. (TypeScript)
my-awesome-list - media-chrome

README

        


  

    

      

      

      

    

  



[![NPM Version](https://img.shields.io/npm/v/media-chrome?style=flat-square&color=informational)](https://www.npmjs.com/package/media-chrome) 

[![NPM Downloads](https://img.shields.io/npm/dm/media-chrome?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/media-chrome) 

[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/media-chrome?style=flat-square&color=informational)](https://www.jsdelivr.com/package/npm/media-chrome)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/media-chrome?style=flat-square&color=informational&label=gzip)](https://bundlephobia.com/result?p=media-chrome) 

[![slack](https://img.shields.io/badge/slack-%23media--chrome-pink?style=flat-square&color=informational)](https://www.video-dev.org/)

Your media player's dancing suit. :man_dancing:

Fully customizable media player controls using web components (native custom elements).

- [x] Compatible with any javascript framework (React, Angular, Svelte, etc.)

- [x] Compatible with the `` and `` elements and [a lot of players](https://www.media-chrome.org/docs/en/media-element#compatible-media-elements) (YouTube, HLS.js, and more)

- [x] Simple HTML to add/remove controls

- [x] Simple CSS to style the controls

_From [Mux](https://mux.com?utm_source=github&utm_medium=social&utm_campaign=media-chrome) and the creator of [Video.js](https://videojs.com/)._

## Documentation

Visit the [official documentation for Media Chrome](https://media-chrome.org/docs) for the latest up-to-date usage instructions.

You can find the [documentation for v0.x of media-chrome here.](https://v0.media-chrome.org/en/get-started)

## Examples

See all of the repo examples in action.

### Video Example

```html

  

    

  

  

    

    

    

    

    

    

  

```

#### Results (Try the CodePen example)



  



### Audio Example

```html

  

  

    

    

    

    

    

    

  

```

#### Results (Try the CodePen example)



  



## Use with React

While you technically can use Media Chrome elements directly with React, it can sometimes be a bit clunky to work with Web Components in React, and some things just don't feel idiomatic to the framework (for example: having to use `class=` instead of `className=`, see [React's official docs regarding web components](https://react.dev/reference/react-dom/components#custom-html-elements) for more details). To help with this, we've published some React wrapper components for all of our core Elements. You can read up on using them [here](https://www.media-chrome.org/docs/en/react/get-started).

## Why?

More often than not web designers and developers just use the default media player controls, even when creating a beautiful custom design theme. It's hard not to.

- Web browsers have built-in media controls that can't easily be customized and look different in every browser.

- Social sites like Youtube, Vimeo, and SoundCloud only let you customize small details of the player, like primary button color.

- Media controls are complex and hard to build from scratch. Open source players like Video.js and JW Player help, but require you to learn proprietary JS APIs, and can be difficult to use with popular Javascript frameworks.

It should be easier... `` is an attempt at solving that.

## Why now?

Web components. @heff spoke about [the potential of web components for video](https://youtu.be/TwnygSWmToc?t=859) at Demuxed 2015, and [again in 2020](https://www.youtube.com/watch?v=qMcNDWyRw20). They allow us to extend the browser's base HTML functionality, meaning we can now build media player controls as simple HTML tags that:

- Can be used like any native HTML tag in HTML, Javascript, and CSS (unleash your designer)

- Are compatible by default with Javascript frameworks (React, Angular, Svelte)

- Can be used across players when using multiple in the same site, e.g Youtube & ``. (Could even be used by players as their own built-in controls)

## Core Concepts

- [Design Principles](https://www.media-chrome.org/docs/en/design-principles)

- [Architecture](https://www.media-chrome.org/docs/en/architecture)