# React AV

> Build custom React audio and video players with headless components, playback hooks, HLS/DASH streaming, WebVTT captions, and subtitle editing.

React AV is a headless library for browser-based React applications. Components are unstyled; applications supply their own layout and CSS. Render interactive media components in the browser. HLS and DASH use the optional @react-av/shaka package and Shaka Player.

Start with [the getting started guide](https://react-av.wykerd.dev/en/introduction.md). Each documentation page has a Markdown version with the same examples and API reference.

## Documentation

- [Build Custom React Media Controls](https://react-av.wykerd.dev/en/controls-intro.md): Choose unstyled React AV controls and sliders to add playback, volume, seeking, fullscreen, and picture-in-picture to your media player.
- [React Media Player Controls](https://react-av.wykerd.dev/en/controls.md): Add play and pause, mute, looping, fullscreen, picture-in-picture, and timestamps to a React video or audio player with custom icons and styles.
- [React Audio and Video Components](https://react-av.wykerd.dev/en/core-components.md): Compose React media players with Media.Root, Video, Audio, Container, and Viewport. Learn how state, media elements, and overlays fit together.
- [React Media Playback Hooks](https://react-av.wykerd.dev/en/core-hooks.md): Read and control React audio and video playback, current time, volume, buffering, playback speed, and fullscreen with React AV hooks.
- [React HLS and DASH Player](https://react-av.wykerd.dev/en/core-other-sources.md): Play HLS and MPEG-DASH streams in React with Shaka Player, native media support, and React AV playback controls and hooks.
- [Build a React Audio and Video Player](https://react-av.wykerd.dev/en/introduction.md): Install React AV and build a custom audio or video player with headless components, playback hooks, and controls you can style yourself.
- [React Seek and Volume Sliders](https://react-av.wykerd.dev/en/sliders.md): Build seek bars, buffered-range indicators, and volume sliders for React media players with React AV and Radix UI slider primitives.
- [Build a React Subtitle Editor](https://react-av.wykerd.dev/en/subtitle-editor.md): Build a React subtitle timeline with editable WebVTT cues, drag-to-adjust timing, video playback, and WebVTT export using React AV.
- [React Text Track Components](https://react-av.wykerd.dev/en/text-track-components.md): Load WebVTT tracks, render caption cues as React elements, and position media controls around subtitles with Track, Cue, and InterfaceOverlay.
- [React Caption and Text Track Hooks](https://react-av.wykerd.dev/en/text-track-hooks.md): Read text tracks and active WebVTT cues in React to build synchronised lyrics, transcripts, captions, and chapter navigation.
- [React Subtitles and WebVTT Captions](https://react-av.wykerd.dev/en/text-track-introduction.md): Add WebVTT subtitles, styled captions, chapter data, and storyboard previews to React video players with React AV text tracks.
- [React Video Thumbnail Previews](https://react-av.wykerd.dev/en/vtt-controls.md): Show storyboard thumbnail previews at a video's playback position using WebVTT metadata and the React AV StoryboardThumbnail component.
- [WebVTT Parser and Renderer](https://react-av.wykerd.dev/en/webvtt.md): Parse and render WebVTT cues, captions, regions, and text tracks with the framework-independent TypeScript implementation in React AV.

## Optional

- [Source and issues](https://github.com/Wykerd/react-av): Package source code, releases, and issue tracking.