A modern and lightweight React video player
Optimized for live streaming, built on top of VidStack with a Twitch-like design.
Features
🎯
Optimized for Live Streaming
HLS support, live indicator, automatic quality switching, and low-latency optimizations
🎨
Modern UI
Twitch-inspired design with customizable theme and responsive controls
📱
Fully Responsive
Works on all screen sizes with touch-friendly controls and adaptive quality
⚡
Performance Focused
Lightweight bundle size with efficient rendering and optimized video delivery
Supported Providers
🟢
Bunny.net Stream
Full HLS support, token authentication, and automatic quality switching
🟡
Cloudflare Stream
Coming Q2 2025 - Global edge network with adaptive bitrate streaming
🟡
AWS MediaLive
Coming Q3 2025 - Integration with AWS ecosystem and RTMP ingestion
Quick Start
Terminal
npm install @quarktv/quark-tv-player
App.jsx
import { QuarkTVPlayer, BunnyStreamClient } from '@quarktv/quark-tv-player'
import '@quarktv/quark-tv-player/dist/styles.css'
// Initialize the client
const client = new BunnyStreamClient({
libraryId: 'your-library-id',
apiKey: 'your-api-key'
})
export default function App() {
return (
<QuarkTVPlayer
videoId="your-video-id"
client={client}
autoPlay
onError={(error) => console.error('Video error:', error)}
onMetadataLoad={(metadata) => console.log('Video metadata:', metadata)}
/>
)
}
Why QuarkTV Player?
🎯 Live Streaming Focus
- • HLS support out of the box
- • Live indicator with animation
- • Automatic quality switching
- • Low-latency optimizations
🎨 Modern Design
- • Twitch-inspired interface
- • Customizable theme
- • Responsive controls
- • Clean and minimal UI
⚡ Performance
- • Lightweight bundle size
- • Efficient rendering
- • Optimized video delivery
- • Minimal dependencies
🛠️ Developer Experience
- • TypeScript support
- • Comprehensive docs
- • Easy integration
- • Active development