redxplyr

redxplyr is a branded, accessible media player for HTML5 video, HTML5 audio, YouTube, Vimeo and HLS playback.

It is maintained by xgauravyaduvanshii and published for:

• Website: redxplyr.flyingdarkdev.com
• GitHub: xgauravyaduvanshii/redxplyr
• Contact: [email protected]

redxplyr keeps the proven Plyr playback core and updates the project identity, demo interface, generated assets and deployment targets for the RedxPlyr fork.

Highlights

• HTML5 video and audio with custom controls
• YouTube and Vimeo embeds with one consistent API
• HLS demo support through hls.js
• Captions, keyboard shortcuts, fullscreen and Picture-in-Picture support
• Sass source files and CSS custom properties for styling
• Stable v1 CDN-style assets from redxplyr.flyingdarkdev.com
• AI-readable install notes at /llms.txt and /ai.html
• Modern demo UI built for the RedxPlyr brand

Quick Start

Install from the package once published:

pnpm add @cloudnest/redxplyr

Use it as an ES module:

import RedxPlyr from '@cloudnest/redxplyr';
import '@cloudnest/redxplyr/dist/redxplyr.css';

const player = new RedxPlyr('#player');

Or use the hosted files:

<link rel="stylesheet" href="https://redxplyr.flyingdarkdev.com/v1/redxplyr.css" />
<script src="https://redxplyr.flyingdarkdev.com/v1/redxplyr.js"></script>
<script>
  const player = new RedxPlyr('#player');
</script>

Markup

HTML5 video:

<video id="player" playsinline controls data-poster="/media/redxplyr-cover.svg">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
  <track kind="captions" label="English" src="/media/redxplyr-demo.en.vtt" srclang="en" default />
</video>

HTML5 audio:

<audio id="player" controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg" />
</audio>

YouTube:

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="aqz-KE-bpKQ"></div>

Vimeo:

<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="1084537"></div>

The internal DOM/CSS hooks still use the plyr and data-plyr-* naming expected by the playback core. The package, generated files, website, docs and deploy targets are branded as RedxPlyr.

Development

Install dependencies:

pnpm install
pnpm --dir demo install --ignore-workspace

Build the library and demo:

pnpm run build

Run the local demo:

pnpm start

The dev server serves demo/ through BrowserSync, usually at:

http://localhost:3000

The local v1 channel is also available after pnpm start:

http://localhost:3000/v1/
http://localhost:3000/v1/redxplyr.css
http://localhost:3000/v1/redxplyr.js
http://localhost:3000/v1/redxplyr.svg

Generated Files

The build creates:

• dist/redxplyr.js
• dist/redxplyr.min.js
• dist/redxplyr.mjs
• dist/redxplyr.polyfilled.js
• dist/redxplyr.css
• dist/redxplyr.svg
• demo/dist/demo.js
• demo/dist/demo.css
• demo/v1/redxplyr.css
• demo/v1/redxplyr.js
• demo/v1/redxplyr.svg

Generated dist/, demo/dist/ and dependency folders are ignored by Git.

Deployment

Deployment config lives in deploy.json.

Both the demo and v1 CDN-style assets are configured to use:

redxplyr.flyingdarkdev.com/v1

The deploy task:

pnpm run deploy

runs linting, prepares versioned URLs, builds assets, uploads files and opens the deployed preview. It expects the Cloudflare R2 and S3 credentials configured for this fork.

Customizing

redxplyr exposes the same core options as Plyr. Common options:

const player = new RedxPlyr('#player', {
  controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
  captions: { active: true },
  keyboard: { global: true },
  iconUrl: 'https://redxplyr.flyingdarkdev.com/v1/redxplyr.svg',
});

Primary styling can be changed with CSS custom properties:

:root {
  --plyr-color-main: #dc263b;
  --plyr-control-radius: 6px;
}

Project Details

| Item | Value | | --- | --- | | Project | redxplyr | | Version | 1.0.0 | | CDN channel | https://redxplyr.flyingdarkdev.com/v1 | | Author | xgauravyaduvanshii | | Email | [email protected] | | Website | https://redxplyr.flyingdarkdev.com | | Repository | https://github.com/xgauravyaduvanshii/redxplyr.git | | License | MIT |

Credits

redxplyr is a branded fork built on top of the original Plyr project. The original MIT license and attribution are retained in LICENSE.md.