The video player
your app deserves.
HLS, DASH, touch gestures, chapters, playlists, theming — every feature you need, zero configuration required. Works with React, Vue, Angular, Svelte, and vanilla JS.
npm install vidstream-player10+
Features
7
Frameworks
100%
TypeScript
~33.5kb
Bundle size
Everything you need, nothing you don't.
9 production-ready features. All optional. All composable.
HLS & DASH Streaming
Adaptive bitrate streaming with automatic quality selection, exponential-backoff retry, and seamless format switching.
Touch Gestures
Swipe volume, double-tap to seek, long-press for playback speed — native-feeling mobile controls.
Seek Thumbnail Preview
WebVTT sprite support. Hover over the progress bar to preview any frame before you seek.
Chapters
Load chapter markers from a WebVTT file. Chapter labels appear on the seekbar and emit events on change.
CSS Variable Theming
Full CSS variable control via a typed PlayerTheme object. Match any brand without touching a stylesheet.
Playlist
Full playlist UI with auto-advance, previous/next controls, a playlist panel, and per-item metadata.
Smart Error Recovery
Exponential backoff retry engine. Recovers from HLS/DASH errors automatically and shows a retry UI to users.
Mini Player
IntersectionObserver-powered picture-in-picture. Floats in the corner when you scroll past the player.
Quality Selector
Manual quality override with a clean dropdown. Lets viewers choose resolution or switch back to auto.
Works with every major framework. Pick yours:
Up and running in 30 seconds.
Install the package, drop in a container element, pass your stream URL. Every feature is opt-in — start simple and add what you need.
import { VideoPlayer } from 'vidstream-player'
const player = new VideoPlayer('#my-player', {
source: { src: 'https://example.com/stream.m3u8', type: 'hls' },
gestures: { enabled: true },
chaptersVtt: '/chapters.vtt',
playlist: [
{ src: '...', title: 'Episode 1' },
{ src: '...', title: 'Episode 2' },
],
playlistOptions: { autoNext: true },
})
player.on('chapterChange', ({ chapter }) => {
console.log('Now in chapter:', chapter.title)
})