> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vyla.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Player

> Build your own player using the self-hosted Vyla API — reference implementation and integration guides.

Since Vyla API is self-hosted, there is no public live player available. You must build your own player interface that connects to your self-hosted API instance. This page provides guidance on building a player and reference implementations.

<Note>
  The player HTML implementation is private. Contact the Vyla team if you need access to the reference player implementation for your self-hosted setup.
</Note>

***

## Building Your Own Player

To build a player that works with your self-hosted Vyla API instance, you need to:

1. **Deploy your Vyla API instance** following the [Self-Hosting](/self-hosting) guide
2. **Set up API keys** for authentication (see [Authentication](/authentication))
3. **Create a frontend player** that connects to your API endpoints

Your player will connect to your self-hosted API instance (typically `http://localhost:7860` for local development) and handle SSE streaming, source switching, and fallback logic.

***

## How It Works

When your player connects to your self-hosted API:

**Subtitle tracks load first** — attached to the video element before any source resolves via the `meta` event. Toggle them with your browser's native subtitle control or the player's subtitle menu.

**Sources stream in progressively** — each provider that passes verification emits a button in the source switcher via `source` events. The player auto-starts on the first one. Click any button to switch manually.

**HLS vs MP4** — sources are labeled `HLS` or `MP4` in the switcher. HLS streams go through HLS.js and support quality selection; MP4 sources play directly via `video.src`. Both work in every modern browser.

***

## Quality Selection

For HLS sources, a quality selector appears once the manifest is parsed. Options are populated from the stream's available levels — select a fixed resolution or leave it on **Auto** to let HLS.js adapt to your connection.

MP4 sources are single-quality — no selector is shown.

***

## Player Integration Guides

<CardGroup cols={2}>
  <Card title="Player Integrations →" href="/guides/integrations">
    Vanilla JS, React, Next.js, Vue, Android, iOS — all with HLS + MP4 support.
  </Card>

  <Card title="Movie Sources API →" href="/api-reference/movie">
    Full SSE event reference for /movie and /tv.
  </Card>
</CardGroup>

***

## Base URL Configuration

When building your player, configure the base URL to point to your self-hosted instance:

```javascript theme={null}
// Local development
const BASE = 'http://localhost:7860';

// Production deployment (configure your domain)
const BASE = 'https://your-api-domain.com';
```

All API endpoints in the integration guides use this base URL pattern. Simply replace the example URLs with your self-hosted instance URL.

***

## Testing Your Player

To test your player implementation:

1. Ensure your Vyla API instance is running (check `/health` endpoint)
2. Create a `standard` or `partner` API key in your database
3. Test with known TMDB IDs:
   * Movies: `550` (Fight Club), `155` (The Dark Knight)
   * TV: `1396` (Breaking Bad), `1399` (Game of Thrones)

If you see zero sources, check your API health endpoint to see which providers are currently reachable from your network.