https://github.com/luwes/playerx

Media Player Web Component - Uniform Player API - Supports HLS, Dash, Mux, Vimeo, YouTube, JW Player, Wistia
https://github.com/luwes/playerx

dash hls jwplayer mux video vimeo wistia youtube

Last synced: about 9 hours ago
JSON representation

Media Player Web Component - Uniform Player API - Supports HLS, Dash, Mux, Vimeo, YouTube, JW Player, Wistia

• Host: GitHub
• URL: https://github.com/luwes/playerx
• Owner: luwes
• Created: 2020-02-12T15:01:12.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-07-19T22:49:11.000Z (7 months ago)
• Last Synced: 2025-02-14T06:18:02.764Z (7 days ago)
• Topics: dash, hls, jwplayer, mux, video, vimeo, wistia, youtube
• Language: JavaScript
• Homepage: https://dev.playerx.io
• Size: 9.57 MB
• Stars: 112
• Watchers: 6
• Forks: 12
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-web-components - `<player-x>` - Media player web component. (Real World / Components)

README

        
# 

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

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

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

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

**npm**: `npm i playerx`  

**cdn**: https://cdn.jsdelivr.net/npm/playerx/+esm  

## Features

- 🏄‍♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API

- 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)

## Usage ([Codesandbox](https://codesandbox.io/s/hello-playerx-22ku4))

```html

```

Demo page: [dev.playerx.io/demo](https://dev.playerx.io/demo/)

## Supported media

* Mux videos use the [Mux Player API](https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md)

* YouTube videos use the [YouTube iFrame Player API](https://developers.google.com/youtube/iframe_api_reference)

* Vimeo videos use the [Vimeo Player API](https://developer.vimeo.com/player/sdk)

* Wistia videos use the [Wistia Player API](https://wistia.com/doc/player-api)

* JW Player videos use the [JW Player API](https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference)

* [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) are playing using [``](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [``](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements

  * HLS streams are played using [`hls.js`](https://github.com/video-dev/hls.js)

  * DASH streams are played using [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js)

## Related

- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺

- [`media-group`](https://github.com/luwes/media-group) Sync and control multiple audio and/or video elements.

- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!

- [``](https://github.com/muxinc/youtube-video-element) A web component for the YouTube player.

- [``](https://github.com/luwes/videojs-video-element) A web component for Video.js.

- [``](https://github.com/luwes/wistia-video-element) A web component for the Wistia player.

- [``](https://github.com/luwes/vimeo-video-element) A web component for the Vimeo player.

- [``](https://github.com/luwes/jwplayer-video-element) A web component for the JW player.

- [``](https://github.com/muxinc/hls-video-element) A web component for playing HTTP Live Streaming (HLS) videos.

- [``](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player web component.

- [``](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.

## Big Thanks

To all the services that offered free plans for building, testing and measuring!

- [Mux](https://mux.com/)

- [Cloudflare](https://www.cloudflare.com/)

- [JW Player](https://www.jwplayer.com/)

- [Github](https://github.com/)