Skip to content

GuideGetting Started

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.

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.

Choose your framework

Choose the JavaScript framework for your project.

ReactComponents and hooks for React 19HTMLCustom elements for any stackVueVue 3 using HTML custom elementsSvelteSvelte 5 using HTML custom elements

Choose your app

Choose whether the instructions target a Vite, Astro, or SvelteKit app.

ViteFast app and development serverAstroContent-focused sites with islandsSvelteKitFull-stack Svelte framework

Choose your use case

Choose the ready-made player that is closest to what you are building.

VideoOn-demand video with full controlsAudioPodcasts, music, and audio-only playbackLive VideoStreams with a Live button, no durationLive AudioLive radio and audio streamsBackground VideoMuted, looping video behind your content

Choose your skin

Choose how your player looks. You can add the files for any skin to your project and edit them later.

DefaultComplete controls with a modern, frosted lookMinimalThe same controls with clean, solid surfacesNo skinBring your own UI built from the components
0:00
Video preset with the default skin, playing our demo media.

Choose your media

Paste a media URL to detect its source type, pick one directly, or upload a video to Mux. The generated packages and component update with your choice.

Optional. The URL also ends up in your generated code.

HTML5 VideoMP4, WebM, and other file URLsHLSAdaptive .m3u8 streams via hls.jsDASHAdaptive .mpd streams via dash.jsMuxMux playback IDs with Mux Data selected by defaultVimeoVimeo videos and private linksYouTubeYouTube videos and shortsCloudflare StreamCloudflare Stream videosTikTokTikTok videosTwitchTwitch channels, videos, and clips
Drop a video to host it for free on MuxWe transcode it into an HLS stream and set it as your source above.orPowered by

Choose your extensions

Add optional behavior to the player. Only extensions that work with your player and media source appear below.

No optional extensions apply to these selections.

Prepare your app

Choose whether to create the selected Svelte app setup or add Video.js to a project you already have.

New projectCreate a new appExisting projectAdd to an existing app
pnpm create vite . --template svelte-ts --no-interactive
pnpm install

Install the packages

Install the HTML elements and any playback adapter your selected media source needs.

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

Add your player

  1. Add the player component

    Add a component that imports the elements it renders. Svelte passes hyphenated tags through to the browser, so no compiler configuration is needed. The imports register the selected player, skin, media, and extensions; the markup composes them.

    <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>

  2. Render the player

    Render the component in a page and pass it the media source you selected above.

    <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 app and verify that the selected media plays.

pnpm dev

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

Choose what to do next

Customize

Use Video.js with Svelte and SvelteKit
Read player state in onMount, pass objects as properties, and configure SvelteKit
Customize skins
Change colors, typography, sizing, and poster presentation
Architecture
Learn how the player, skins, media, and UI components fit together

Deploy

Browser support
Check supported browsers and rendering environments
TypeScript
Configure TypeScript for Video.js packages
Bundlers
Check bundler compatibility
Content Security Policy
Configure Content Security Policy for your player
CDN
See every bundle the CDN serves and the layout rules behind the URLs
Self-host the player
Serve the player from your own origin for offline or restricted-network deployments

Something not quite right? You can submit an issue and ask for help, or explore other support options.