Lazy-loaded engines
Heavy streaming engines load only when playback starts — not on page load. HLS users never download Shaka; DASH users never download hls.js.
@streamq/playernpm install
Production-ready video SDK
Streamsuper.— StreamQ Player, React video SDK for HLS, DASH, and live streaming
Ship players with a penchant for quality.
HLS, DASH, live streaming, cinematic UI, and sq_live_* license control — in one install.
- HLS, DASH & live
- Ready-made UI
- License control
@streamq/player
Live demo~79 KB
gzip
Initial player — full UI + license gate
Lazy
on play
hls.js & Shaka load only when needed
1
package
npm install @streamq/player
0
CSS runtime
Plain --sq-* tokens, no CSS-in-JS
Performance
Built for speedPerformance-first architecture
Your homepage stays fast. The 200–300 KB streaming engine loads only when someone hits play.
Single package
One npm install — player, UI, adapters, and license validation. Integrate in an afternoon, not a quarter.
No CSS-in-JS runtime
@streamq/player/baseline.css is static CSS. Theme with variables — no styled-components or emotion overhead.
CI bundle budgets
Strict size limits on every package in CI. Enterprise teams get proof that bundle growth is monitored.
Safari native HLS
On Safari, HLS can play natively — often skipping hls.js entirely for better battery and faster start.
Lightweight license check
Pass license="sq_live_*" only. Validation runs in the background — we manage Firestore, not your team.
Newest release
Quick startInstall in minutes
Same API as the live player above.
Example
TSXnpm install @streamq/player react react-domimport '@streamq/player/baseline.css'import { StreamqPlayer } from '@streamq/player'export function StreamqPlayerDemo() {return (<StreamqPlayerfillViewportlicense='sq_live_D8JK2LQ9MNP4' // Demo key only — replace with your production sq_live_* keylayout="default"radius="none"source={{src: 'https://example.com/stream.mpd', // Your DASH .mpd or HLS .m3u8 URLtype: 'dash', // 'dash' for .mpd · 'hls' for .m3u8}}renderSubtitlesvideoProps={{crossOrigin: 'anonymous',muted: true,playsInline: true,poster: '/posters/streamq-player-poster.png', // Optional poster before playpreload: 'metadata',}}/>)}
- 1
Install
npm install @streamq/player
- 2
Configure
Add your sq_live_* key
- 3
Play
HLS, DASH, and live in one component
Super things included
Tier 1Everything in @streamq/player
One npm package for playback, UI, subtitles, live mode, and license control.
License control
Gate playback with sq_live_* keys. Revoke remotely — no redeploy.
Streaming
HLS, DASH, and MP4 with adaptive quality and multi-audio.
Live
Live layout, jump-to-live, and edge detection built in.
Subtitles
Discover, toggle, and pick subtitle tracks from the stream.
Player UI
Cinematic controls, 4 layouts, gestures, PiP, and fullscreen.
Accessibility
Screen readers, keyboard nav, and high-contrast support.
Developer setup
baseline.css tokens, TypeScript, React 18+, one npm install.
Need more?
PremiumEnterprise extensions
Premium adds DRM, analytics, custom UI, and white-label on top of the full @streamq/player SDK.
DRM
Widevine, PlayReady, FairPlay
Analytics & QoE
Startup, rebuffer, engagement events
Custom UI SDK
Headless core, React hooks, UI blocks
Casting & ads
Chromecast hooks & ad lifecycle
Themes & white-label
@streamq/themes & custom tokens
Enterprise SLA
Priority support & custom integrations
Pricing
Simple license tiers
Start free with a demo key. Player from $49/mo. Premium from $499/mo with DRM and all extensions.
Evaluation
Free
Try before you buy
- Demo sq_live_* license key
- All @streamq/player features
- Docs & quick-start examples
Player
$49/mo
or $499/yr
License key, docs & integration help
- Production sq_live_* license key
- Documentation & examples
- Help with integration
Premium
$499/mo
or $4,999/yr
DRM-ready · all enterprise extensions
- Everything in Player
- DRM — Widevine, PlayReady, FairPlay
- Analytics & QoE
- Custom UI SDK
- Casting, ads & thumbnails
- Media Session API
- Themes, white-label & enterprise SLA
Player vs enterprise
| Capability | Player | Enterprise |
|---|---|---|
| HLS / DASH / MP4 | Yes | Yes |
| Live streaming | Yes | Yes |
| Subtitles | Yes | Yes |
| Cinematic UI | Yes | Preset only |
| License control | Yes | Yes |
| Custom UI from scratch | No | Yes |
FAQ
AnswersVideo player SDK questions
How StreamQ compares to Mux, Bitmovin, JW Player, and building your own HLS/DASH stack.
What is StreamQ Player?
StreamQ Player is a commercial React video SDK distributed on npm as @streamq/player. It ships a cinematic player UI, HLS and DASH playback, live streaming support, subtitle rendering, and built-in sq_live_* license validation in a single package.
How does StreamQ compare to Mux, Bitmovin, and JW Player?
Mux, Bitmovin, and JW Player are established video infrastructure platforms with hosting, analytics, and DRM ecosystems. StreamQ focuses on a developer-first npm SDK: one React component, lazy-loaded streaming engines, static CSS theming, and license gating without Firebase setup on your side. Premium adds DRM and enterprise extensions for teams that need more than playback.
Does StreamQ support HLS and DASH?
Yes. Pass a manifest URL with type hls for .m3u8 streams or type dash for .mpd streams. hls.js and Shaka Player load lazily on first play — only the engine you need is downloaded.
Is StreamQ Player free to try?
Yes. Use the public demo license key on the homepage or paste your own DASH or HLS URL on the /try page. Production sq_live_* keys start at $49/month with documentation and integration help included.
Does StreamQ include DRM?
The core @streamq/player package covers HLS, DASH, live mode, subtitles, and license control. Widevine, PlayReady, and FairPlay DRM are available on the Premium plan along with analytics, custom UI SDK, casting, ads, and white-label options.
How big is the StreamQ Player bundle?
The initial @streamq/player preset is about 79 KB gzip including full UI and license gating. Heavy streaming engines are lazy-loaded when playback starts, keeping marketing pages and app shells fast.
How do I install StreamQ Player in React?
Run npm install @streamq/player react react-dom, import @streamq/player/baseline.css once, then render <StreamqPlayer license="sq_live_*" source={{ src, type }} />. See the npm package README for full API details.
Start free
Ready to ship?
Read the docs on npm, install the package, or email for a license key and integration help.