Skip to content

GuideGetting Started

React Installation Guide

Install Video.js in React and build an accessible, customizable video player with composable controls

Video.js is a React video player component library: composable primitives, hooks, and TypeScript types for building accessible, customizable players with minimal bundle sizes, advanced features, and consistency across browsers.

AI Quickstart

Paste this prompt into your coding agent:

Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --framework react` to print the version-matched choices and instructions without changing files.

Choose your framework

Choose the JavaScript framework for your project.

ReactComponents and hooks for React 19HTMLCustom elements for any stackVueVue 3 using HTML custom elementsSvelteSvelte 5 using HTML custom elements

Choose your app

Choose the app environment that controls the setup commands and file locations below.

Next.jsFull-stack React with App RouterViteFast app and development serverTanStack StartFull-stack React with TanStack RouterReact RouterReact Router framework modeAstroContent-focused sites with islandsLaravelLaravel app with Vite assets

Choose your use case

The default presets work well for general website playback. The live presets suit streams: they add a Live button and drop the duration and current-time displays that on-demand playback relies on. More pre-built players to come.

VideoOn-demand video with full controlsAudioPodcasts, music, and audio-only playbackLive VideoStreams with a Live button, no durationLive AudioLive radio and audio streamsBackground VideoMuted, looping video behind your content

Choose your skin

Choose how your player looks. You can add the files for any skin to your project and edit them later.

DefaultComplete controls with a modern, frosted lookMinimalThe same controls with clean, solid surfacesNo skinBring your own UI built from the components
0:00
Video preset with the default skin, playing our demo media.

Choose your media

Video.js plays plain files, adaptive streams, and embeds from hosting services, and switching between them is a one-line change. Paste a URL to detect the type, pick one directly, or upload a video to Mux.

Optional. The URL also ends up in your generated code.

HTML5 VideoMP4, WebM, and other file URLsHLSAdaptive .m3u8 streams via hls.jsDASHAdaptive .mpd streams via dash.jsMuxMux playback IDs with Mux Data selected by defaultVimeoVimeo videos and private linksYouTubeYouTube videos and shortsCloudflare StreamCloudflare Stream videosTikTokTikTok videosTwitchTwitch channels, videos, and clips
Drop a video to host it for free on MuxWe transcode it into an HLS stream and set it as your source above.orPowered by

Choose your extensions

Add optional behavior to the player. Only extensions that work with your player and media source appear below.

No optional extensions apply to these selections.

Choose how to install

Choose from the installation options available for your selections.

Prepare your app

Choose whether to create the selected app setup or add Video.js to a project you already have.

New projectCreate a new appExisting projectAdd to an existing app
pnpm create next-app . --ts --eslint --app --no-src-dir --import-alias "@/*" --use-pnpm --yes

Install the packages

pnpm add @videojs/react@10.0.0-rc.4

Add your player

Add the player to the file shown for your selected app setup. It imports the selected player, skin, media, and extensions from the packages you installed.

import '@videojs/react/video/skin.css';
import { VideoPlayer, VideoSkin, Video } from '@videojs/react/video';

export default function Page() {
  return (
    <VideoPlayer>
      <VideoSkin style={{ width: '100%', aspectRatio: '16 / 9' }}>
        <Video src={"https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"} playsInline />
      </VideoSkin>
    </VideoPlayer>
  );
}

Run your app

Start the app and verify that the media plays.

pnpm dev

That’s it! You now have a working Video.js player.

Own the UI

Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.

Install Video.js with Shadcn
Add editable skin source and build a working React or HTML player

Choose what to do next

Customize

Customize skins
Change colors, typography, sizing, and poster presentation
UI components
Explore the building blocks used by skins and custom controls
Build your own component
Connect custom UI to player state and actions

Deploy

Browser support
Check supported browsers and rendering environments
TypeScript
Configure TypeScript for Video.js packages
Bundlers
Check bundler compatibility
Content Security Policy
Configure Content Security Policy for your player

Something not quite right? You can submit an issue and ask for help, or explore other support options.