Player: 1.0-RC Learn more

Build your player.

UI components and hooks for building media players on the web. Robust, customizable, and accessible.

works seamlessly with

Components.
Built to compose.

Display
A n n o u n c e r
Buttons
T o g g l e B u t t o n
Sliders
S l i d e r
Menus
M e n u

Design.
Built to be styled.

Layouts.
Built to ship.

player.tsx
    
    

Providers.
Built to adapt.

State.
Built to be reactive.

Accessible.
Built for all.

  • Announcements

    Informative screen reader updates for media state changes.

    Learn more
  • Labels

    Clear semantic labels and roles for screen readers.

    Learn more
  • Captions

    Consistent and customizable captions across browsers.

    Learn more
  • Audio

    Multitrack audio support for i18n and descriptions.

    Learn more
  • Keyboard

    Full keyboard navigation support and shortcuts.

    Learn more
  • Focus

    Robust focus management and clear indicators.

    Learn more
  • Color

    Accessible contrasts and color scheme options.

    Learn more
  • Tooltips

    Popover text to provide more helpful descriptions.

    Learn more
  • Motion

    Reduced motion support for vestibular disorders.

    Learn more
  • Customize

    Tailored user settings for all player preferences.

    Learn more
  • Compliant

    WCAG 2.2, WAI-ARIA, and CVAA spec-compliant.

    Learn more

Features.
Built to satisfy.

  • TypeScript

    First-class TS support including types for multiple frameworks.

  • Player API

    Comprehensive set of props, methods, events, and more.

    Learn more
  • Components

    Modular and reusable player components, ready to compose.

    Learn more
  • Hooks

    Convenient player hooks for React.

    Learn more
  • Architecture

    Robust player architecture tested at scale at Reddit.

    Learn more
  • Accessible

    Built-in accessibility features.

    Learn more
  • Frameworks

    Support for multiple JS frameworks.

    Learn more
  • Bundler Plugins

    Auto-setup for various bundlers including Vite, SvelteKit, Nuxt, and more.

    Learn more
  • VS Code

    IDE plugin for auto-completions and docs.

  • Providers

    Load various source types including HLS, DASH, and more.

    Learn more
  • Live Streams

    Extensive live streaming support and API.

    Learn more
  • SSR

    Server-side rendering support.

  • State Management

    Easily manage reading and updating media state.

    Learn more
  • Styling

    Customizable headless components, style your way.

    Learn more
  • Tailwind CSS

    Seamless Tailwind integration with our plugin and components.

    Learn more
  • Layouts

    Use production-ready layouts or build your own.

    Learn more
  • Themes

    Light and dark mode support.

    Learn more
  • I18n

    Custom language translations support.

    Learn more
  • Events

    Rich set of normalized media events.

    Learn more
  • Triggers

    Trace events back to their origin.

    Learn more
  • Load Stratagies

    Specify when media should begin loading.

    Learn more
  • Captions

    Customizable captions with support for various formats.

    Learn more
  • Chapters

    Easily navigate content sections.

    Learn more
  • Thumbnails

    Preview and navigate content with images.

    Learn more
  • Clipping

    Trim start and end of media client-side.

    Learn more
  • Storage

    Save player and media settings.

    Learn more
  • Gestures

    Perform actions based on user gestures.

    Learn more
  • Keyboard

    Control player state and components with keyboard input.

    Learn more
  • Fullscreen

    Normalized API across browsers and providers.

    Learn more
  • PIP

    Mutli-task with mini floating players.

    Learn more
  • Screen Orientation

    Rotate screen for an immersive experience.

    Learn more
  • Audio Gain

    Apply gain to output to increase volume.

    Learn more
  • Audio Tracks

    Manage multiple audio tracks.

    Learn more
  • Text Tracks

    Manage captions, subtitles, chapters, and more.

    Learn more
  • Qualities

    Manage multiple playback video qualities.

    Learn more
  • Remote Playback

    Play media on a remote device such as a TV.

    Learn more

Icons.
Built by us.

device
download
episodes
eye
fast-backward
fast-forward
flag
fullscreen-arrow-exit
fullscreen-arrow
fullscreen-exit
fullscreen
heart
info
language
link
lock-closed
lock-open
menu-horizontal
menu-vertical
microphone
mobile
moon
music-off
music
mute
next
no-eye
notification
odometer
pause
picture-in-picture-exit
picture-in-picture
play
playback-speed-circle
playlist
previous
question-mark
queue-list
radio-button-selected
radio-button
repeat-on
repeat-square-on
repeat-square
repeat
replay
rotate
search
seek-backward-10
seek-backward-15
seek-backward-30
seek-backward
seek-forward-10
seek-forward-15
seek-forward-30
seek-forward
send
settings-menu
settings-switch
settings
share-arrow
share
shuffle-on
shuffle
stop
subtitles
sun
theatre-mode-exit
theatre-mode
thumbs-down
thumbs-up

Platform.
Built to stream.

dashboard.dev
1:05
Installation
Describing UI
Beginner
Part One
1080p
MP4
5:30
Project Tour
Describing UI
Beginner
Part One
HLS
7:30
Your First Component
Describing UI
Beginner
Part One
HLS
10:05
Responding to Events
Adding Interactivity
Intermediate
Part Two
HLS
12:30
Render and Commit
Adding Interactivity
Intermediate
Part Two
HLS
12:40
State as a Snapshot
Adding Interactivity
Intermediate
Part Two
HLS

Open Source.
Built transparently.

  • Player
    1.0
    0.0k

    UI component library for building video and audio players for the web.

    Learn more
  • Captions
    1.0

    Modern media captions parser and renderer. Supports VTT, SRT, and SSA.

    Learn more
  • Icons
    1.0

    Beautifully hand-crafted collection of media icons designed for players.

    Learn more
  • Plyr
    Archived
    0.0k

    Simple, lightweight, accessible and customizable media player.

    Learn more
  • Vime
    Archived
    0.0k

    Customizable, extensible, accessible and framework-agnostic media player.

    Learn more

Community.
Built for us.

We're a community of frontend devs working with video & audio. Join in on the discussions, share your designs and knowledge, ask for help, and connect with others building awesome experiences.