DOCUMENTATION

Build with Scarlett Player.

Guides to how the player is put together, how to extend it with your own plugins, how to embed it, and how we work on it. Start with the quick start or try every option in the playground.

01 / GUIDE

Architecture

How Scarlett Player is built: the core engine, plugin lifecycle and plugin API, reactive state, events, the error and reconnect model, live playback and the build.

Read the guide 02 / GUIDE

Writing a plugin

Write a Scarlett Player plugin that adds its own events, state and control-bar controls without editing the core or UI packages.

Read the guide 03 / GUIDE

Embed guide

How the Scarlett Player embed package is built and integrated: script tags, iframes and the JavaScript API, CDN layout, multi-tenant branding and bundle sizes.

Read the guide 04 / GUIDE

Contributing

Code standards for Scarlett Player: TypeScript and TSDoc rules, plugin guidelines, testing, the git workflow and changesets, performance, security and accessibility.

Read the guide

Comparisons

How Scarlett Player differs from other web players, with a source and a check date for every claim about them.

01 / COMPARISON

Packages

Every package ships at the same version. Install the core and the plugins you need.

Package	Description
`@scarlett-player/core`	Core engine - reactive state, event bus, plugin system, error handling
`@scarlett-player/hls`	HLS provider - hls.js + native Safari fallback, ABR, quality selection, live DVR, self-healing error recovery. A smaller `@scarlett-player/hls/light` entry (hls.js/light, no subtitles/ID3/DRM) shares the same machinery
`@scarlett-player/native`	Native provider - video (MP4, WebM, MOV, MKV, OGV) and audio (MP3, WAV, OGG, FLAC, AAC, M4A, Opus)
`@scarlett-player/whep`	WHEP provider - WebRTC playback over WHEP for sub-second live monitoring; bearer token or async token provider, the HLS provider's reconnect knobs, a receiver-side latency estimate. Answers only (no server counter-offers)
`@scarlett-player/ui`	Video UI - play/pause, progress, volume, fullscreen, PiP, quality menu, live indicator, keyboard shortcuts
`@scarlett-player/audio-ui`	Audio UI - compact player with artwork, progress, shuffle/repeat controls, multiple layouts
`@scarlett-player/airplay`	AirPlay casting - Safari AirPlay with auto-detect
`@scarlett-player/chromecast`	Chromecast - Google Cast SDK, session management, remote control
`@scarlett-player/analytics`	Analytics - startup time, rebuffer ratio, bitrate tracking, engagement metrics, beacon transport
`@scarlett-player/playlist`	Playlist - queue management, shuffle (Fisher-Yates), repeat modes, auto-advance, persistence
`@scarlett-player/media-session`	Media Session - lock screen controls, media keys, album art, seek bar
`@scarlett-player/captions`	Captions - WebVTT subtitles/closed captions, HLS subtitle extraction, auto-select by language
`@scarlett-player/watermark`	Watermark - anti-piracy text/image overlay, configurable position, opacity, dynamic repositioning
`@scarlett-player/share`	Share - native share sheet on mobile, copy link, social targets, embed codes, playback timestamps
`@scarlett-player/chapters`	Chapters - markers on the progress bar, chapter list, seek to chapter, WebVTT chapters track support
`@scarlett-player/gestures`	Gestures - double-tap left/right to seek with accumulation, tap to toggle controls, touch only
`@scarlett-player/clips`	Clips - two-handle in/out range selection, loop preview, submission through a host callback or a built-in POST. VOD only in v1; the player captures the range, the server produces the clip
`@scarlett-player/vue`	Vue 3 - `<ScarlettPlayer>` component + `useScarlettPlayer()` composable
`@scarlett-player/embed`	CDN embed - auto-init via data attributes, UMD + ESM bundles, video/audio/full entry points

Installation and quick starts in the README