# Svelte Installation Guide

Install Video.js in Svelte or SvelteKit and build a video player with HTML custom elements

Svelte apps built with Vite, Astro, or SvelteKit use Video.js HTML custom elements directly in their markup. These lightweight, framework-free components build accessible, customizable players with small bundles, advanced features, and consistent behavior across browsers.

> **Note: Release Candidate**
>
> Video.js v10 is a *release candidate*. We feel the API is stable and ready to build with. With your [feedback](https://github.com/videojs/v10/issues), a few documentation updates, and any final fixes, we look forward to shipping 10.0.0 soon. [Read the Release Candidate blog post](https://videojs.org/blog/videojs-v10-release-candidate).

> **Tip: Coming from another player?**
>
> Follow the migration guide for [Video.js 8](https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8), [Mux Player](https://videojs.org/docs/framework/html/guides/migrate-from-mux-player), [Plyr](https://videojs.org/docs/framework/html/guides/migrate-from-plyr), or [Media Chrome](https://videojs.org/docs/framework/html/guides/migrate-from-media-chrome). Each maps your existing setup onto Video.js v10 instead of starting from scratch.

## 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 svelte` to print the version-matched choices and instructions without changing files.
```

## Installation options for coding agents

The web Markdown page contains the default installation. Add the query parameters below to its `.md` URL for a complete, validated variation. From a project or an offline docs bundle, run the CLI command below instead. Both paths use the same installation renderer and only return instructions; they do not modify a project.

This page fixes the installation method to `packaged` and the framework to `svelte`.

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

### Query parameters

- `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. Minimal has cleaner surfaces and the same controls as Default. Values: `default`, `minimal`, `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. Values: `vite`, `astro`, `sveltekit`. Default: vite.

Run the command above without flags to see the corresponding CLI flags for every framework.

### Decide in this order

1. **Inspect the project.** Read package.json, framework config, and lockfiles to infer the framework, app setup, and package manager. React installs @videojs/react; HTML, Vue, and Svelte install @videojs/html.
2. **Choose the starting point.** Use existing when adapting a compatible project. Use new only when the user wants a new app or the intended workspace has no app. Confirm the choice when the workspace and request do not make it clear.
3. **Choose the player.** Use video unless the request signals another experience: audio, music, or podcasts use audio; a live stream uses live-video or live-audio; a muted, looping decorative video uses background-video. Ask only when those signals conflict.
4. **Choose the skin.** Use default unless the request asks for a minimal, cleaner, or more subtle look, which uses minimal; both contain the same controls. Use none only when the project builds its own controls. Ask only when those signals conflict.
5. **Choose the media.** Infer the adapter from the source when possible. Mux wins for Mux playback URLs: stream.mux.com/\<playback-id>.m3u8 or a bare playback ID uses mux-video, mux-audio, or mux-background-video rather than hls. Mux static renditions such as .mp4 or .m4a files use html5-video or html5-audio. Other .m3u8 URLs use hls.
6. **Choose extensions.** Mux Data is included by default for Mux video and audio sources. Add Google Cast when a standard or live video player with a ready-made skin should cast a compatible source. Use none when no extension is needed.
7. **Choose how to install.** This guide uses packaged modules, which need a bundler. Match the package manager to the project lockfile. For an existing HTML site without a build step, use CDN scripts instead.
8. **Return one explicit plan.** Confirm the choices once, then pass every applicable query parameter, including `extensions=none` when no extension is needed and `source-url=demo` when there is no media URL yet. Check that Defaulted options says none. Adapt conditional setup steps and existing paths before changing files.

### Compatible 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 by framework

- `svelte`: templates `vite`, `astro`, `sveltekit`

### Installation pages

- [Packaged modules: React](https://videojs.org/docs/guides/installation/react.md)
- [Packaged modules: HTML](https://videojs.org/docs/guides/installation/html.md)
- [Packaged modules: Vue](https://videojs.org/docs/guides/installation/vue.md)
- [Packaged modules: Svelte](https://videojs.org/docs/guides/installation/svelte.md)
- [Editable Shadcn source: React source](https://videojs.org/docs/guides/installation/shadcn.md?framework=react)
- [Editable Shadcn source: HTML source](https://videojs.org/docs/guides/installation/shadcn.md?framework=html)
- [CDN: HTML from jsDelivr](https://videojs.org/docs/guides/installation/cdn.md)

## Selected options

- `method`: `packaged`
- `framework`: `svelte`
- `project`: `existing`
- `preset`: `video`
- `skin`: `default`
- `media`: `html5-video`
- `extensions`: `none`
- `source-url`: `https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4`
- `package-manager`: `pnpm`
- `template`: `vite`

Defaulted options: project, preset, skin, source-url, media, extensions, template, package-manager.

## Reproduce or change these instructions

```sh
npx @videojs/cli agents init --method packaged --framework svelte --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --package-manager pnpm --template vite
```

## Install the packages

```bash
pnpm add @videojs/html@10.0.0-rc.4
```

## Add your player

Merge the example into the existing Vite route or component that should render the player, and preserve unrelated content.

### `src/lib/VideoPlayer.svelte`

_Merge this into the existing file, or create the file when it is missing._

```svelte
<script lang="ts">
  import '@videojs/html/video/player';
  import '@videojs/html/video/skin';
</script>

<!--
  The player element owns and shares state between the UI
  components and Media. Put layout on the skin or container.
 -->
<video-player>
  <!--
    Skins contain the entire player UI and are easily swappable.
    Add the skin source to your project for full control over its
    UI components.
   -->
  <video-skin>
    <!--
        Media are players without UIs, handling networking
        and display of the media. They are easily swappable
        to handle different sources.
      -->
    <slot />
  </video-skin>
</video-player>

<style>
video-skin {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>
```

### `src/App.svelte`

_Merge this into the existing file, or create the file when it is missing._

```svelte
<script lang="ts">
  import VideoPlayer from './lib/VideoPlayer.svelte';
</script>

<VideoPlayer>
  <video src={"https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"} playsinline></video>
</VideoPlayer>
```

## Run your app

Start the development server and verify that the selected media plays.

_Long-running: start it in the background, verify the result, then stop it._

```bash
pnpm dev
```

> These are instructions only. Review and run the commands in your project; no files were modified.

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

> **Note: Server rendering with SvelteKit**
>
> Keep the element imports static. SvelteKit renders the custom-element markup on the server, and the browser upgrades it when the page loads. Put code that needs the element or browser APIs in `onMount`. See [Use SvelteKit](https://videojs.org/docs/framework/html/guides/svelte#use-sveltekit) for the details.

## Choose what to do next

### Customize

- [Use Video.js with Svelte and SvelteKit](https://videojs.org/docs/framework/html/guides/svelte): Read player state in onMount, pass objects as properties, and configure SvelteKit
- [Customize skins](https://videojs.org/docs/framework/html/guides/customize-skins#style-a-packaged-skin): Change colors, typography, sizing, and poster presentation
- [Architecture](https://videojs.org/docs/framework/html/guides/architecture): Learn how the player, skins, media, and UI components fit together

### Deploy

- [Browser support](https://videojs.org/docs/framework/html/guides/browser-support): Check supported browsers and rendering environments
- [TypeScript](https://videojs.org/docs/framework/html/guides/typescript): Configure TypeScript for Video.js packages
- [Bundlers](https://videojs.org/docs/framework/html/guides/bundlers): Check bundler compatibility
- [Content Security Policy](https://videojs.org/docs/framework/html/guides/content-security-policy): Configure Content Security Policy for your player
- [CDN](https://videojs.org/docs/framework/html/guides/cdn): See every bundle the CDN serves and the layout rules behind the URLs
- [Self-host the player](https://videojs.org/docs/framework/html/guides/self-hosting): Serve the player from your own origin for offline or restricted-network deployments

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

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt