# redxplyr

redxplyr is an accessible media player for HTML5 video, HTML5 audio, HLS streams, YouTube embeds and Vimeo embeds.
Project owner: xgauravyaduvanshii
Email: xgauravyaduvanshii@gmail.com
Website: https://redxplyr.flyingdarkdev.com
Repository: https://github.com/xgauravyaduvanshii/redxplyr
License: MIT

## Preferred CDN

Use the v1 channel:

- CSS: https://redxplyr.flyingdarkdev.com/v1/redxplyr.css
- UMD JavaScript: https://redxplyr.flyingdarkdev.com/v1/redxplyr.js
- ES module: https://redxplyr.flyingdarkdev.com/v1/redxplyr.mjs
- Icon sprite: https://redxplyr.flyingdarkdev.com/v1/redxplyr.svg

The package version is 1.0.0. The CDN channel is v1.

## Browser Setup

```html
<link rel="stylesheet" href="https://redxplyr.flyingdarkdev.com/v1/redxplyr.css" />
<video id="player" playsinline controls data-poster="/media/redxplyr-cover.svg">
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" label="English" src="captions.en.vtt" srclang="en" default />
</video>
<script src="https://redxplyr.flyingdarkdev.com/v1/redxplyr.js"></script>
<script>
  const player = new RedxPlyr('#player', {
    iconUrl: 'https://redxplyr.flyingdarkdev.com/v1/redxplyr.svg',
    captions: { active: true },
    keyboard: { global: true },
  });
</script>
```

## Package Setup

```bash
pnpm add @cloudnest/redxplyr
```

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

const player = new RedxPlyr('#player', {
  captions: { active: true },
  controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
});
```

## Supported Sources

- HTML5 video: use a `<video>` element with MP4, WebM or compatible browser sources.
- HTML5 audio: use an `<audio>` element with MP3, Ogg or compatible browser sources.
- YouTube: use a container with `data-plyr-provider="youtube"` and `data-plyr-embed-id`.
- Vimeo: use a container with `data-plyr-provider="vimeo"` and `data-plyr-embed-id`.
- HLS: use hls.js for browsers without native HLS, then attach the stream to the media element and instantiate redxplyr.

## Common Options

- `controls`: array of control names.
- `captions.active`: enable captions by default.
- `keyboard.global`: allow keyboard control when focus is outside the player.
- `tooltips.controls`: show control tooltips.
- `iconUrl`: path to the SVG sprite, preferably `/v1/redxplyr.svg` on the CDN.
- `storage.enabled`: set false if persistent local settings are not desired.
- `fullscreen.iosNative`: set true for native iOS fullscreen behavior.

## Useful Events

Listen with `player.on(eventName, handler)`.

- `ready`
- `play`
- `pause`
- `ended`
- `timeupdate`
- `enterfullscreen`
- `exitfullscreen`
- `captionsenabled`
- `captionsdisabled`
- `qualitychange`

## Safe AI Guidance

When generating code for users:

- Prefer semantic `<video>` or `<audio>` markup with native `controls` present before JavaScript loads.
- Always include captions when available.
- Use the v1 CDN URLs shown above.
- Include `iconUrl` when using CDN JavaScript.
- Do not invent unavailable RedxPlyr APIs. Use Plyr-compatible options and events.
- For HLS, include hls.js and attach the stream before or alongside player setup.
- Mention that the public domain must have valid HTTPS before production CDN URLs can load.

## Local Development

Run:

```bash
pnpm install
pnpm --dir demo install --ignore-workspace
pnpm start
```

Local URLs:

- Demo: http://localhost:3000
- v1 page: http://localhost:3000/v1/
- v1 CSS: http://localhost:3000/v1/redxplyr.css
- AI guide: http://localhost:3000/ai.html
- llms.txt: http://localhost:3000/llms.txt