mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
149 lines
4.8 KiB
Plaintext
149 lines
4.8 KiB
Plaintext
---
|
|
title: Installation
|
|
description: Get started with Video.js v10 by choosing your framework, skin, and media renderer
|
|
---
|
|
|
|
import JSPicker from '@/components/installation/JSPicker.astro';
|
|
import RendererPicker from '@/components/installation/RendererPicker';
|
|
import SkinPicker from '@/components/installation/SkinPicker';
|
|
import UseCasePicker from '@/components/installation/UseCasePicker';
|
|
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="Technical Preview">
|
|
Video.js v10 is currently in technical preview. The API and docs are actively evolving. See the <DocsLink slug="concepts/v10-roadmap">roadmap</DocsLink> for more details on what's coming.
|
|
</Aside>
|
|
|
|
Video.js is beautifully crafted, accessible media player components; packed with powerful features; tuned for high-performance; intentionally built for your favorite frameworks; compatible with the media formats and hosting services you love.
|
|
|
|
Get started quickly with a selection of great presets and skins, then extend and customize to your hearts content.
|
|
|
|
## Choose your JS framework
|
|
|
|
Video.js provides idiomatic experiences in both React and HTML Web Components.
|
|
|
|
<ContentWidth margins="lg">
|
|
<JSPicker />
|
|
</ContentWidth>
|
|
|
|
|
|
## Choose your use case
|
|
|
|
Use case presets get you started closer to your desired player without wrangling plugins. The default is the Website Player preset, which comes with a complete set of features for simple video playback on your site.
|
|
|
|
<ContentWidth margins="lg">
|
|
<UseCasePicker client:idle />
|
|
</ContentWidth>
|
|
|
|
|
|
## Choose your media renderer
|
|
|
|
Media are like players without the UI. Pick the one that matches your video or audio files and hosting. They can easily be changed later.
|
|
|
|
<ContentWidth margins="lg">
|
|
<RendererPicker client:idle />
|
|
</ContentWidth>
|
|
|
|
## Install your player
|
|
|
|
<FrameworkCase frameworks={["html"]}>
|
|
<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>
|
|
<Tab client:idle value="cdn">cdn</Tab>
|
|
</TabsList>
|
|
<TabsPanel client:idle value="npm" initial>
|
|
```bash
|
|
npm install @videojs/html
|
|
```
|
|
</TabsPanel>
|
|
<TabsPanel client:idle value="pnpm">
|
|
```bash
|
|
pnpm add @videojs/html
|
|
```
|
|
</TabsPanel>
|
|
<TabsPanel client:idle value="yarn">
|
|
```bash
|
|
yarn add @videojs/html
|
|
```
|
|
</TabsPanel>
|
|
<TabsPanel client:idle value="bun">
|
|
```bash
|
|
bun add @videojs/html
|
|
```
|
|
</TabsPanel>
|
|
<TabsPanel client:idle value="cdn">
|
|
```html
|
|
<script>
|
|
// don't need this, will be included in frosted
|
|
// import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website.js';
|
|
import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.js';
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.css" />
|
|
```
|
|
</TabsPanel>
|
|
</TabsRoot>
|
|
|
|
</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
|
|
<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.
|