mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
120 lines
4.4 KiB
Plaintext
120 lines
4.4 KiB
Plaintext
---
|
|
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🙏](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** — 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** — 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). |