# vidstack/player

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vidstack-player).**

3,555 stars · 213 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/vidstack/player
- Homepage: https://vidstack.io
- awesome-repositories: https://awesome-repositories.com/repository/vidstack-player.md

## Topics

`accessibility` `analytics` `audio` `hls` `html` `javascript` `media` `player` `react` `solid-js` `svelte` `typescript` `ui` `video` `vimeo` `vue` `web-components` `youtube`

## Description

This project is a framework for building accessible, framework-agnostic video and audio players for the web. It provides a headless library of reactive hooks and modular components that separate playback logic from visual presentation, allowing developers to create custom media interfaces while maintaining full control over styling and layout.

The library distinguishes itself through a provider-based abstraction layer that normalizes disparate streaming protocols and third-party media sources into a unified playback environment. By utilizing an event-driven state management system, it ensures consistent behavior across complex media features such as adaptive bitrate streaming, casting, and picture-in-picture, regardless of the underlying media source.

The framework covers a broad range of capabilities, including built-in support for accessibility standards like keyboard navigation and screen reader compliance. It offers extensive configuration options for interface design, including prebuilt layout templates, scalable icons, and mechanisms for persisting user preferences across sessions. The architecture is designed for performance, supporting lazy loading and server-side rendering to optimize initial page delivery.

## Tags

### Graphics & Multimedia

- [Adaptive Streaming Players](https://awesome-repositories.com/f/graphics-multimedia/adaptive-streaming-players.md) — Integrates HLS and DASH streaming protocols with unified state management and cross-browser normalization.
- [Media Playback Controls](https://awesome-repositories.com/f/graphics-multimedia/audio-music/media-capture-and-playback/media-playback-controls.md) — Provides programmatic commands for adjusting playback state, seeking, looping, and audio gain. ([source](https://github.com/vidstack/player/blob/main/CHANGELOG.md))
- [Media Playback Controls](https://awesome-repositories.com/f/graphics-multimedia/media-playback-controls.md) — Exposes a reactive, event-driven architecture for controlling playback state, track selection, and quality across media providers. ([source](https://www.vidstack.io/docs/player))
- [Advanced Video Playback Controls](https://awesome-repositories.com/f/graphics-multimedia/advanced-video-playback-controls.md) — Manages complex media features like live streaming, picture-in-picture, and casting through a reactive architecture.
- [Cross-Platform Media Players](https://awesome-repositories.com/f/graphics-multimedia/cross-platform-media-players.md) — Consolidates diverse streaming protocols and third-party media sources into a unified playback experience.
- [Adaptive Streaming Players](https://awesome-repositories.com/f/graphics-multimedia/media-players/adaptive-streaming-players.md) — Enables adaptive bitrate streaming by configuring support for industry-standard manifest formats within the player instance. ([source](https://www.vidstack.io/player/demo))
- [Video Streaming](https://awesome-repositories.com/f/graphics-multimedia/streaming-distribution/streaming-broadcasting/media-streaming/video-streaming.md) — Delivers compliant media playback interfaces supporting screen readers, keyboard navigation, and internationalization.

### Web Development

- [HTML5 Media Players](https://awesome-repositories.com/f/web-development/html5-media-players.md) — Provides a framework-agnostic library for building accessible, customizable video and audio players with support for diverse streaming protocols.
- [Media Abstraction Layers](https://awesome-repositories.com/f/web-development/media-abstraction-layers.md) — Normalizes disparate streaming protocols and media sources into a consistent set of playback controls.
- [Third-Party Media Player Integrations](https://awesome-repositories.com/f/web-development/third-party-api-integrations/third-party-media-player-integrations.md) — Embeds third-party streaming services and specialized video protocols into a unified playback environment. ([source](https://github.com/vidstack/player/blob/main/CHANGELOG.md))

### Mobile Development

- [Media Playback UI Components](https://awesome-repositories.com/f/mobile-development/android-ecosystem/android-ui-components/media-playback-ui-components.md) — Ships a collection of reusable, accessible UI components for controlling media playback, captions, and player layouts.
- [Media Integration](https://awesome-repositories.com/f/mobile-development/mobile-capabilities/media-integration.md) — Integrates diverse media providers including local files and network streams for unified playback. ([source](https://www.vidstack.io/docs/player/getting-started/installation/javascript))

### Software Engineering & Architecture

- [Headless Component Logic](https://awesome-repositories.com/f/software-engineering-architecture/logic-and-presentation-separation/headless-component-logic.md) — Separates functional playback logic from visual presentation to allow custom interface styling.

### User Interface & Experience

- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Delivers pre-built, compliant UI components including menus and sliders that support keyboard navigation and internationalization. ([source](https://www.vidstack.io/docs/player))
- [Event-Driven State Managers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers.md) — Synchronizes playback state and media metadata across decoupled components using a centralized reactive event bus.
- [Media Player Accessibility](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance/media-player-accessibility.md) — Implements accessible media player controls including screen reader support, keyboard navigation, and focus management. ([source](https://vidstack.io/))
- [Headless Media Player Libraries](https://awesome-repositories.com/f/user-interface-experience/media-players/headless-media-player-libraries.md) — Provides reactive hooks and components that separate playback logic from visual presentation for custom media interfaces.
- [Media Player Interfaces](https://awesome-repositories.com/f/user-interface-experience/picture-in-picture-interfaces/media-player-interfaces.md) — Implements advanced playback features including casting, picture-in-picture, screen orientation, and custom caption rendering. ([source](https://www.vidstack.io/docs/player))
- [Media Player Interfaces](https://awesome-repositories.com/f/user-interface-experience/media-player-interfaces.md) — Allows customization of interface appearance and behavior through slots, properties, and theme settings. ([source](https://github.com/vidstack/player/blob/main/CHANGELOG.md))
- [Accessible](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/accessible.md) — Builds interactive elements with built-in focus management and WAI-ARIA patterns for accessibility compliance.
- [Component Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management.md) — Maintains continuous playback state by preventing component destruction during complex DOM transitions or layout changes. ([source](https://www.vidstack.io/docs/player/getting-started/installation/vue))