StrataPlayer

A Universal Media Engine for the Web.

Introduction

StrataPlayer is a framework-agnostic media engine designed for web applications. It decouples playback logic from the UI, ensuring consistent performance during state updates.

Built on React 19 and TypeScript, it features a modular plugin architecture to support various streaming formats while keeping the core bundle size minimal.

Key Features

• Universal Playback: Support for HLS, DASH, MPEG-TS/FLV, and WebTorrent (P2P).
• Framework Agnostic: First-class React support with mounting helpers for Vue, Svelte, Angular, and Vanilla JS.
• Network Handling: Automatic exponential backoff and retry logic.
• Audio Engine: Integrated Web Audio API nodes for gain control and volume boosting.
• UI System:
  • 4 built-in themes (Default, Pixel, Game, Hacker).
  • VTT/SRT subtitle support with user customization.
  • Picture-in-Picture & Google Cast integration.
• State Management: Powered by NanoStore for isolated state updates.

Installation

Install the core player:

npm install strataplayer

Install the specific engines you need as peer dependencies:

# For HLS (.m3u8)
npm install hls.js

# For DASH (.mpd)
npm install dashjs

# For MPEG-TS / FLV
npm install mpegts.js

# For WebTorrent (Magnet links)
npm install webtorrent

Usage

1. Basic Usage (React)

For standard MP4/WebM files, no plugins are required.

import { StrataPlayer } from "strataplayer";
import "strataplayer/style.css";

const App = () => {
  return (
    <StrataPlayer
      src="https://example.com/video.mp4"
      theme="default"
      themeColor="#6366f1"
    />
  );
};

2. Universal Player (All Formats)

To support all formats, import the plugins and pass them to the player.

import { StrataPlayer } from "strataplayer";
import { HlsPlugin } from "strataplayer/hls";
import { DashPlugin } from "strataplayer/dash";
import { MpegtsPlugin } from "strataplayer/mpegts";
import { WebTorrentPlugin } from "strataplayer/webtorrent";
import "strataplayer/style.css";

// Initialize plugins once
const plugins = [
  new HlsPlugin(),
  new DashPlugin(),
  new MpegtsPlugin(),
  new WebTorrentPlugin(),
];

const App = () => {
  return (
    <StrataPlayer
      // Can be a magnet link, m3u8, mpd, or mp4
      src="magnet:?xt=urn:btih:..."
      plugins={plugins}
      theme="hacker"
      autoPlay={false}
    />
  );
};

3. Vanilla JS / Vue / Svelte

Use the mountStrataPlayer helper to render the player into any DOM node.

import { mountStrataPlayer } from "strataplayer";
import { HlsPlugin } from "strataplayer/hls";
import "strataplayer/style.css";

const container = document.getElementById("player-root");

const player = mountStrataPlayer(container, {
  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
  plugins: [new HlsPlugin()],
  theme: "game",
  themeColor: "#eab308",
});

// Update props later
// player.update({ theme: 'pixel' });

// Cleanup
// player.unmount();

Component Props & Options

The <StrataPlayer /> component accepts the following configuration options.

Source & Playback

UI & Appearance

Functionality & Controls

Advanced Customization

Detailed documentation for configuring layers, controls, context menus, and custom settings is available in the full documentation.

Plugin System

StrataPlayer uses a modular system. You only pay the bundle size cost for the formats you use.

Keyboard Shortcuts

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the dev server:

   npm run dev

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes.
4. Push to the branch.
5. Open a Pull Request.

License

Distributed under the MIT License. See LICENSE for more information.