---
title: Installation
description: Install Video.js and build your first player with streaming support and accessible controls
---

import JSPicker from '@/components/installation/JSPicker.astro';
import RendererPicker from '@/components/installation/RendererPicker';
import SkinPickerSection from '@/components/installation/SkinPickerSection.astro';
import UseCasePicker from '@/components/installation/UseCasePicker';
import HTMLInstallTabs from '@/components/installation/HTMLInstallTabs';
import HTMLUsageCodeBlock from '@/components/installation/HTMLUsageCodeBlock';
import ReactCreateCodeBlock from '@/components/installation/ReactCreateCodeBlock';
import ReactUsageCodeBlock from '@/components/installation/ReactUsageCodeBlock';
import ContentWidth from '@/components/frames/ContentWidth.astro';
import Aside from '@/components/Aside.astro';
import DocsLink from '@/components/docs/DocsLink.astro';
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';

<Aside type="caution" title="Beta Software">
Video.js v10 is currently in _beta_. The API may evolve with [feedback&#x1F64F;](https://github.com/videojs/v10/issues). See the [Changelog](https://github.com/videojs/v10/blob/main/CHANGELOG.md)\[todo\] for recent updates and the <DocsLink slug="concepts/v10-roadmap">Roadmap</DocsLink> for more details on what's coming.
</Aside>

<FrameworkCase frameworks={["react"]}>
Video.js is a **React video player component library** &mdash; composable primitives, hooks, and TypeScript types for building accessible, customizable players with minimal bundle size.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
Video.js is an **HTML video player built on custom elements** &mdash; lightweight, framework-free components for building accessible, customizable players with minimal bundle size.
</FrameworkCase>

Answer the questions below to get started quickly with your first embed code.

## Choose your JS framework

Video.js aims to provide idiomatic development experiences in your favorite JS and CSS frameworks. More to come. ([vote](https://github.com/videojs/v10/discussions/categories/ideas))\[todo\].

<ContentWidth margins="lg">
  <JSPicker />
</ContentWidth>


## Choose your use case

The defaults work well for general website playback. More prebuilt players to come. ([vote](https://github.com/videojs/v10/discussions/categories/ideas))\[todo\]

<ContentWidth margins="lg">
  <UseCasePicker client:idle />
</ContentWidth>

<ContentWidth margins="lg">
  <SkinPickerSection />
</ContentWidth>

## Choose your media source type

Video.js supports a wide range of file types and hosting services. It's easy to switch between them. ([missing something?](https://github.com/videojs/v10/discussions/categories/ideas))

<ContentWidth margins="lg">
  <RendererPicker client:idle />
</ContentWidth>

## Install Video.js

<FrameworkCase frameworks={["html"]}>
  <HTMLInstallTabs client:idle />
</FrameworkCase>
<FrameworkCase frameworks={["react"]}>
  <TabsRoot client:idle>
    <TabsList client:idle label="Installation">
      <Tab client:idle value="npm" initial>npm</Tab>
      <Tab client:idle value="pnpm">pnpm</Tab>
      <Tab client:idle value="yarn">yarn</Tab>
      <Tab client:idle value="bun">bun</Tab>
    </TabsList>
    <TabsPanel client:idle value="npm" initial>
      ```bash
      npm install @videojs/react
      ```
    </TabsPanel>
    <TabsPanel client:idle value="pnpm">
      ```bash
      pnpm add @videojs/react
      ```
    </TabsPanel>
    <TabsPanel client:idle value="yarn">
      ```bash
      yarn add @videojs/react
      ```
    </TabsPanel>
    <TabsPanel client:idle value="bun">
      ```bash
      bun add @videojs/react
      ```
    </TabsPanel>
  </TabsRoot>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
## Use your player
<ContentWidth>
  <HTMLUsageCodeBlock client:idle />
</ContentWidth>
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
## Create your player
Add it to your components folder in a new file.
<ContentWidth>
  <ReactCreateCodeBlock client:idle />
</ContentWidth>

## Use your player
<ContentWidth>
  <ReactUsageCodeBlock client:idle />
</ContentWidth>
</FrameworkCase>

That's it! You now have a fully functional Video.js player. Go forth and play.

Something not quite right? You can [submit an issue](https://github.com/videojs/v10/issues) and ask for help, or explore [other support options](/html5-video-support).