React Video Kit

    React Video Kit 4 alpha

    Beautiful video.
    Nothing extra.

    A React video player made of plugins. It starts at 6 KB, adds only what you use, and React doesn't render at all while the video plays.

    Get startedOpen the playground
    TrailerView From A Blue Moon
    0:00−0:000:00

    Everything optional is a plugin. Fullscreen. Captions. HLS. DRM. Even hiding the controls. Import what you use, and the rest never reaches your bundle.

    Plugins

    Flip a switch.
    See what it costs.

    Each switch rebuilds a real player and picks up from the same frame, so what you see is exactly what the code beside it ships.

    0:00−0:000:00

    About17.9KB of JavaScript, brotli

    "use client";import { VideoPlayer } from "react-video-kit/player";import { idle } from "react-video-kit/idle";import { gestures } from "react-video-kit/gestures";import { hotkeys } from "react-video-kit/hotkeys";import { fullscreen } from "react-video-kit/fullscreen";import { speed } from "react-video-kit/speed";import "react-video-kit/styles.css";const plugins = [  idle(),  gestures(),  hotkeys(),  fullscreen(),  speed(),];export function Player() {  return (    <VideoPlayer src="/video.mp4" plugins={plugins} />  );}
    Every plugin, source, and token is in the playground

    Performance

    Time never touches React.

    A shared clock writes straight to the DOM, only when a pixel would change, and stops when playback does. Press play and leave your mouse alone. These counters are live, and the first one watches every React commit on this page.

    TrailerView From A Blue Moon
    0:00−0:000:00

    React commits

    0

    Since you pressed play

    Clock writes

    0

    To the DOM, no render

    timeupdate

    0

    Fired by the browser

    Composition

    Three ways in. One engine.

    Start with a finished player today. Rearrange it next week. Replace every pixel when the design calls for it. Your plugins keep working at each step.

    One component, done.

    Every control, styled, in a layout that adapts from a phone to a cinema display.

    0:00−0:000:00
    react-video-kit/player19.6 KB
    "use client";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";const plugins = defaultPlugins();export default function ComposeReady() {  return (    <VideoPlayer      src="/media/sample-720.mp4"      poster="/media/poster.jpg"      plugins={plugins}    />  );}

    Theming

    Make it yours, in plain CSS.

    Start from a theme inspired by the platforms people already know, or set a few custom properties of your own. Your styles always win, and every control keeps working the same way.

    TrailerView From A Blue Moon
    0:00−0:000:00
    /* The default look needs no theme. */<VideoPlayer src="/video.mp4" />

    Take a closer look

    The hard parts of video,
    already done.

    Adaptive streaming, live edges, ad breaks, and key systems. Each is a plugin behind the same small interface.

    HLS and DASH

    hls.js and dash.js load only when a source needs them. Quality menus work the same across both, and on plain MP4s.

    Live and DVR

    A LIVE pill that knows when you've drifted from the edge, one click back, and a seekable window when the stream has one.

    Ads that fail open

    VAST with no SDK, or Google IMA. If an ad is blocked, slow, or broken, the content plays anyway.

    One DRM config

    Describe your licence servers once. It becomes the right settings for hls.js, dash.js, or native FairPlay.

    AirPlay and Chromecast

    The timeline, volume, and time all keep working while another screen does the playing.

    The keyboard, properly

    Sliders are real range inputs, focus returns where it came from, and no shortcut fires while you're typing.

    Try pressing one

    Every language, either direction

    Translated labels, plurals, and captions you can style. The layout mirrors in RTL, except the parts that shouldn't.

    Tested the way it's used

    Real playback through real engines, every example checked for accessibility, server rendering run from the packed tarball, and tree-shaking proven in three bundlers.

    Size

    Every byte, accounted for.

    Every figure here comes from the package's own build, in brotli, without React. Each entry has a budget, and going over fails the check. Plugins you don't import add nothing.

    Kernel
    5.9 KB
    Root and Media, the floor
    Full layout
    13.4 KB
    Every control, no plugins
    With defaults
    19.6 KB
    defaultPlugins() included
    Skin
    8.9 KB
    One optional CSS file

    What each plugin adds to a player

    Browse every plugin

    Start small.
    Add the rest when you need it.

    Read the guideMoving from v3
    pnpm add react-video-kit@alpha

    Version 4 is in alpha, and its API can still change. It isn't on npm yet.

    Demo footage is the View From A Blue Moon trailer, which belongs to its makers and isn't covered by this project's licence.

    React Video Kit