React Video Kit

Theme

Source

Layout

Tokens

Radius20pxBlur30pxControls38px

Controls

Auto-hideControls leave when idle+0.7
GesturesClick to play, double-tap to seek+0.7
KeyboardSpace, arrows, F, M, and more+1.3
FullscreenButton, plus iOS native+0.9
Picture in pictureKeep watching elsewhere+0.7

Menus

SpeedA menu of playback rates+0.9
QualityAuto, or pick a level+1.4
CaptionsStyled cues, in any language+2.0
Audio tracksLanguages and descriptions+0.9

Timeline

ChaptersSegments on the timeline+1.5
ThumbnailsPreviews while scrubbing+0.9

Streaming

HLShls.js, loaded only when needed+1.9
DASHdash.js, loaded only when needed+2.1
LiveEdge detection and DVR+0.6
RecoveryRetries when networks fail+0.5

Viewing

PlaylistQueue, next, and up-next+1.3
EpisodesSeasons on a shelf, with progress+3.2
Skip introSkip intros, recaps, and credits+0.8
Info panelArtwork, details, and credits+1.0
AutoplayWith sound, then muted+0.6
PersistenceResume where they left off+0.7
Media SessionLock screen and media keys+0.6
AnalyticsPlayback as events, for any service+0.8
LanguagesTranslated, and mirrored for RTL+0.3
OrientationTakes the shape of a vertical video+0.3

Revenue and rights

AdsVAST or IMA, and fails open+2.7
DRMOne config for every key system+1.4

Casting

AirPlayButton appears on Safari+0.5
ChromecastButton appears with a device+1.8

Extras

Ambient lightA glow from the picture's edges+1.0
Mini playerKeeps playing in a corner+0.9
ScreenshotSaves the frame as a PNG+0.9
LoopThe whole video, or A to B+1.5
Shortcuts listPress ? to see every key+1.4
Stats for nerdsA live readout for debugging+1.4
ShareLinks to a moment in the video+0.9
Fit or fillWhole picture, or fill the frame+0.6
TranscriptRead along, click to jump+1.4

0:00−0:000:00

About22.4KB of JavaScript

Plus 8.9 KB of CSS. Brotli, without React. A real bundle is usually a little smaller, because plugins share strings.

"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 { pip } from "react-video-kit/pip";import { speed } from "react-video-kit/speed";import { quality } from "react-video-kit/quality";import { captions } from "react-video-kit/captions";import { recovery } from "react-video-kit/recovery";import "react-video-kit/styles.css";const plugins = [  idle(),  gestures(),  hotkeys(),  fullscreen(),  pip(),  speed(),  quality(),  captions({    tracks: [      { src: "/captions.en.vtt", language: "en", label: "English" },    ],  }),  recovery(),];export function Player() {  return (    <VideoPlayer src="/video.mp4" plugins={plugins} />  );}

Playground