React AV

Build modern media players with React.

Fully-featured, headless, hooks-based, and declarative media player framework for React.

Get Started

Full-Featured Doesn't Mean Complex

Experience how straightforward it is to integrate media playback into your React applications without sacrificing features. React AV provides everything you'll need: from basic playback controls to advanced features like subtitles, storyboard thumbnails, and more.

Complete Composable Toolkit

React AV is designed for developers who need more than just a basic media player. It's a versatile, component-based framework that adapts to your needs - whether you're building a simple player or a full-featured media application. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<Media.Root>
  <Editor 
    mediaComponent={
      <HLS.Video src='/manifest.m3u8' />
    }
  >
    <TimelineEditor>
      <TimelineControlBar />
      <TimelineContainer>
        <TimelineHeader />
        <TimelineSubtitlesTrack>
          <TimelineSubtitleCueEditor />
        </TimelineSubtitlesTrack>
      </TimelineContainer>
    </TimelineEditor>
  </Editor>
</Media.Root>

Declarative and Hooks-Based API

Say goodbye to the headaches of browser APIs and state management. With React AV's declarative and hooks-based approach, you can effortlessly sync media playback with dynamic content like lyrics or captions, letting you focus on creating amazing experiences.