Vidstack Player — Modern Web Video and Audio Player Framework

Introduction

Vidstack Player is a modern alternative to Video.js and JW Player for building media experiences on the web. It provides both a complete player UI and headless primitives for custom implementations. The library is framework-agnostic at its core, with first-class bindings for React and web components.

What Vidstack Player Does

• Plays video and audio from local files, HLS streams, DASH streams, YouTube, and Vimeo
• Provides a default player UI with controls, captions, chapters, and quality selectors
• Offers headless hooks and state management for building fully custom player interfaces
• Handles adaptive bitrate streaming with quality selection via hls.js and dash.js
• Supports text tracks, thumbnails, and chapter markers for enhanced viewing

Architecture Overview

Vidstack uses a provider-based architecture where a core media controller manages playback state independently of the UI layer. Providers handle the specifics of each source type: native HTML5 video, hls.js for HLS, dash.js for DASH, and embedded iframes for YouTube and Vimeo. The UI layer subscribes to the media state store and renders controls reactively. Components are built as web components with React wrappers, enabling use in any framework.

Self-Hosting & Configuration

• Install the package and import the MediaPlayer and MediaProvider components
• Set the src prop to a URL, HLS manifest, or provider-specific source object
• Customize the player layout using built-in layout components or compose your own
• Configure text tracks via the textTracks prop for subtitles and captions
• Use the player store and hooks to build custom controls that react to playback state

Key Features

• Universal provider system supporting HLS, DASH, YouTube, Vimeo, and native media
• Accessible by default with keyboard navigation, screen reader support, and ARIA labels
• Headless mode for complete UI control without the default player chrome
• Responsive design with mobile-optimized touch gestures and controls
• TypeScript-first with full type coverage for all APIs and events

Comparison with Similar Tools

• Video.js — mature player with a plugin ecosystem; Vidstack offers a more modern component-based architecture
• Plyr — simple media player with clean defaults; Vidstack provides deeper customization and streaming support
• hls.js — a streaming library only; Vidstack builds a full player experience on top of streaming libraries
• Shaka Player — Google's streaming player; Vidstack adds UI components and React integration

FAQ

Q: Does it support live streaming? A: Yes. HLS and DASH live streams are supported through the hls.js and dash.js providers.

Q: Can I use it without React? A: Yes. The core is built on web components and works in vanilla HTML or any framework.

Q: How do I add subtitles? A: Pass text track objects via the textTracks prop with src, kind, language, and label properties.

Q: Is it free for commercial use? A: Yes. Vidstack Player is MIT licensed and free for both personal and commercial projects.

Sources

• https://github.com/vidstack/player
• https://vidstack.io/