# Video.js installation guides

Choose the guide for the framework and installation path you intend to use. Each page includes a complete default installation. Add the listed query parameters to its `.md` URL for another validated combination.

## AI Quickstart

Install the [Video.js skill](https://github.com/videojs/skills), then ask the Video.js CLI for version-matched installation choices for every framework. The command only prints instructions and never modifies a project.

```sh
npx @videojs/cli@10.0.0 agents init
```

## Packaged modules

- [React](https://videojs.org/docs/guides/installation/react.md)
- [HTML](https://videojs.org/docs/guides/installation/html.md)
- [Vue](https://videojs.org/docs/guides/installation/vue.md)
- [Svelte](https://videojs.org/docs/guides/installation/svelte.md)

## Editable Shadcn source

- [React source](https://videojs.org/docs/guides/installation/shadcn.md?framework=react)
- [HTML source](https://videojs.org/docs/guides/installation/shadcn.md?framework=html)

## CDN

- [HTML from jsDelivr](https://videojs.org/docs/guides/installation/cdn.md)

## Query parameters

The page route selects Packaged, Shadcn, or CDN and fixes the framework except on the Shadcn page. Query parameters select the remaining options:

- `framework`: On the Shadcn page, choose `react` or `html`. Default: `react`.
- `project`: Whether to adapt the current project or scaffold a new one. New projects need a named app setup. Values: `new`, `existing`. Default: existing.
- `preset`: The player configuration and control set. Values: `video`, `audio`, `live-video`, `live-audio`, `background-video`. Default: video.
- `skin`: The visual skin. Neutral has cleaner surfaces and the same controls as Default. Values: `default`, `neutral`, `compat`, `none`. Default: default. Applies when preset is not background-video.
- `media`: The media source or playback adapter. See the preset compatibility map below. Values: `background-video`, `hls-background-video`, `cloudflare`, `dash`, `hls`, `html5-audio`, `html5-video`, `mux-audio`, `mux-background-video`, `mux-video`, `spotify`, `tiktok`, `twitch`, `vimeo`, `youtube`. Default: the selected preset's first compatible media source.
- `extensions`: A comma-separated list of optional player extensions compatible with the selected player. Pass `none` when no extension is needed. Values: `none`, `google-cast`, `mux-data`. Default: mux-data for Mux media; none otherwise (reported as defaulted).
- `source-url`: The http:// or https:// media URL placed in the generated player example. Pass `demo` to choose the Video.js demo source for the selected media explicitly. Default: the Video.js demo source for the selected media (reported as defaulted).
- `package-manager`: The command runner used for app setup, packages, Shadcn, and the development server. Values: `npm`, `pnpm`, `yarn`, `bun`. Default: pnpm. Applies when method is not cdn with template none.
- `template`: The app setup and file layout. CDN defaults to `none` for an existing page and `vite` for a new app. Packaged `none` needs an existing bundler; use CDN for a site without a build step. `none` is unavailable with Shadcn. Values: `next`, `vite`, `start`, `react-router`, `astro`, `laravel`, `none`, `nuxt`, `sveltekit`. Default: next for React; vite otherwise.
- `styling`: The Shadcn source styling. Compatible values depend on the framework. Values: `tailwind`, `css`. Default: tailwind for React; css otherwise. Applies when method=shadcn.

## Compatibility

- React instructions install `@videojs/react`. HTML, Vue, and Svelte instructions install `@videojs/html`.
- CDN is plain HTML only. Use `project=existing&template=none` for an existing page or `project=new&template=vite` to scaffold a minimal app.
- Shadcn installs editable React or plain HTML skin source. Vue and Svelte use packaged installation.
- The `none` app setup is available only for plain HTML with Packaged or CDN. Shadcn requires a named app setup.
- Shadcn presets: `video`, `audio`, `live-video`, `live-audio`.
- Shadcn skins: `default`, `neutral`, `compat`.

### Media sources by preset

- `video`: `html5-video`, `hls`, `dash`, `mux-video`, `vimeo`, `youtube`, `cloudflare`, `tiktok`, `twitch`
- `audio`: `html5-audio`, `mux-audio`, `spotify`
- `live-video`: `hls`, `mux-video`
- `live-audio`: `mux-audio`
- `background-video`: `background-video`, `hls-background-video`, `mux-background-video`

### App setup and Shadcn styling by framework

- `react`: app setups `next`, `vite`, `start`, `react-router`, `astro`, `laravel`; Shadcn styling `tailwind`, `css`
- `html`: app setups `vite`, `astro`, `laravel`, `none`; Shadcn styling `css`
- `vue`: app setups `vite`, `astro`, `nuxt`
- `svelte`: app setups `vite`, `astro`, `sveltekit`