React Video Kit
DocsPluginsPlayground
    v4 (alpha)v3
    • Introduction
    • Getting started
    • Migrating from version 3

    Concepts

    • Sources
    • Errors
    • Plugins
    • State and time
    • Providers

    Composition

    • Overview
    • Ready-made player
    • Styled parts
    • Headless
    • Slots
    • Theming
    • Themes
    • Accessibility

    Plugins

    • Overview

    Controls

    • Auto-hide
    • Gestures
    • Keyboard
    • Fullscreen
    • Picture in picture

    Menus

    • Speed
    • Quality
    • Captions
    • Audio tracks

    Timeline

    • Chapters
    • Thumbnails

    Streaming

    • HLS
    • DASH
    • Live
    • Recovery

    Viewing

    • Orientation
    • Playlist
    • Episodes
    • Skip intro
    • Info panel
    • Autoplay
    • Persistence
    • Media Session
    • Analytics
    • Languages

    Extras

    • Ambient light
    • Mini player
    • Screenshot
    • Loop
    • Shortcuts
    • Stats for nerds
    • Share
    • Fit
    • Transcript

    Revenue and rights

    • Ads
    • DRM

    Casting

    • AirPlay
    • Chromecast

    Recipes

    • Overview
    • Next.js App Router
    • Next.js Pages Router
    • Vite
    • React Router
    • TanStack Start
    • Astro
    • Writing a plugin

    Reference

    • Components
    • Hooks
    • Primitives
    • Core
    • Player
    • Compat
    • Locales

    Recipes

    Set up the player in your framework, or write a plugin of your own.

    Each framework recipe comes from a real production build of a freshly scaffolded project, and ends with the versions it was built against.

    Choose a recipe

    Next.js App Router

    Server Components, and why plugins go in a client file.

    Next.js Pages Router

    Server rendering on React 18 or 19.

    Vite

    A client-rendered app, with engines in their own chunks.

    React Router

    Framework mode, with sources from route loaders.

    TanStack Start

    Server rendering, and turning it off per route.

    Astro

    A React island, and which client directive to use.

    Writing a plugin

    Build a skip intro button, and meet each part of a plugin.

    PreviousChromecastNextNext.js App Router