Version 4 is in alpha. It can still change between releases, and it isn't on npm yet. Version 3 docs
Getting started
Install the package and play your first video.
Set it up
Install it
pnpm add react-video-kit@alphaReact 18.2 or newer is the only requirement. Streaming engines are optional, and you only add them if you need them.
Make a player
"use client";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";import "react-video-kit/styles.css";const plugins = defaultPlugins();export function Player() { return <VideoPlayer src="/video.mp4" poster="/poster.jpg" plugins={plugins} />;}defaultPlugins() adds auto-hiding controls, gestures, keyboard shortcuts, error recovery, the captions, speed, and quality menus, picture in picture, and fullscreen.
Use it
import { Player } from "@/components/player";export default function Page() { return <Player />;}That's a complete player:
"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} /> );}Keep plugins out of render
Plugins are read once, when the player is created. Define the array outside your component, or in useMemo. To change them later, remount the player by changing its key.
Why "use client"?
In the Next.js App Router, plugins contain functions, and functions can't pass from a Server Component to a Client Component. Create them in a file marked "use client", as above. The player still renders on the server.
Choose your plugins
defaultPlugins() is a convenience, not a requirement. List only the ones you want, and the rest stay out of your bundle:
"use client";import { fullscreen } from "react-video-kit/fullscreen";import { hotkeys } from "react-video-kit/hotkeys";import { idle } from "react-video-kit/idle";import { VideoPlayer } from "react-video-kit/player";import "react-video-kit/styles.css";const plugins = [idle(), hotkeys(), fullscreen()];export function Player() { return <VideoPlayer src="/video.mp4" plugins={plugins} />;}A control appears when its plugin is installed, so there's no other configuration to do. Browse them all in the plugin gallery, which adds up the size as you select.
Play a stream
MP4 and WebM play with no plugin at all. HLS and DASH each need a plugin and its engine, which is loaded only when a source needs it.
npm install hls.jsimport { hls } from "react-video-kit/hls";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";const plugins = [hls(), ...defaultPlugins()];<VideoPlayer src="/stream.m3u8" plugins={plugins} />;npm install dashjsimport { dash } from "react-video-kit/dash";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";const plugins = [dash(), ...defaultPlugins()];<VideoPlayer src="/stream.mpd" plugins={plugins} />;Add captions
Pass your tracks to the captions plugin. Its menu appears on its own.
import { captions } from "react-video-kit/captions";const plugins = [ captions({ tracks: [{ src: "/captions.en.vtt", language: "en", label: "English" }], }),];Control it from code
A ref gives you the player, and anything inside the player can use hooks:
"use client";import { useRef } from "react";import type { Player } from "react-video-kit/core";import { VideoPlayer } from "react-video-kit/player";export function Intro() { const player = useRef<Player>(null); return ( <> <VideoPlayer ref={player} src="/video.mp4" /> <button onClick={() => player.current?.commands.seek(30)}>Skip the intro</button> </> );}