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.

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

---

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 guide
2. Set up API keys for authentication (see 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

Player Integrations →

Vanilla JS, React, Next.js, Vue, Android, iOS — all with HLS + MP4 support.

Movie Sources API →

Full SSE event reference for /movie and /tv.

---

Base URL Configuration

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

// 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.