strataplayer

v1.2.23

Published

a month ago

A modern, framework-agnostic media engine for the web. Supports HLS, DASH, MPEG-TS, and WebTorrent with a plugin-based architecture and React integration.

0High
0Medium
0Low

dev-ashishranjan

video-player html5-video hls dash mpegts webtorrent streaming react media-player p2p

StrataPlayer

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

| Key | Action | | ------------- | ----------------- | | Space / K | Play / Pause | | F | Toggle Fullscreen | | M | Toggle Mute | | Arrow Right | Seek Forward 5s | | Arrow Left | Seek Backward 5s | | Arrow Up | Increase Volume | | Arrow Down | Decrease Volume |

Development

Clone the repository
Install dependencies:
```
npm install
```
Start the dev server:
```
npm run dev
```

Contributing

Contributions are welcome! Please follow these steps:

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

License

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