Skip to content

GuideGetting Started

CDN Installation Guide

Load Video.js from jsDelivr and build an HTML video player without installing Video.js packages

Video.js can run directly from browser-ready files on jsDelivr. This HTML-only path does not install Video.js packages: choose a player, load its scripts, and add the generated custom-element markup to your page.

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 --method cdn --framework html` 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

Add the player to an HTML page you already have, or create a minimal Vite app for it.

New appCreate a minimal Vite appExisting pageAdd to an existing HTML page

Choose your use case

Choose the ready-made player that is closest to what you are building. Live presets add live-edge controls; background video is muted and loops behind your content.

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

Choose what the player will play. The CDN page only shows sources with a browser-ready bundle.

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.

Choose how to install

Choose from the installation options available for your selections.

Prepare your app

Create the app in an empty directory, then run the remaining commands from that directory.

pnpm create vite . --template vanilla-ts --no-interactive
pnpm install

Load Video.js

Add these generated module scripts to your page. They register the player, selected skin, media element, and selected extensions.

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/video.js"></script>

Add your player

Place this generated markup where the player should appear. It uses the media source you selected above.

Replace the starter page with this generated page. It loads Video.js and renders the player with the media source you selected above.

<!--
  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 style="display: block; width: 100%; aspect-ratio: 16 / 9;">
    <!--
        Media are players without UIs, handling networking
        and display of the media. They are easily swappable
        to handle different sources.
      -->
    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
  </video-skin>
</video-player>

Run your app

Start the app and verify that the media plays.

pnpm dev

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

Own the UI

Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.

Install Video.js with Shadcn
Add editable skin source and build a working React or HTML player

Choose what to do next

Customize

Customize skins
Change colors, typography, sizing, and poster presentation
Install with Shadcn
Add editable skin source and build a working React or HTML player
Internationalize the player
Load another locale or add your own translations

Deploy

CDN files and URLs
Understand CDN URLs, bundles, stylesheets, locales, and shared chunks
Browser support
Check supported browsers and rendering environments
Content Security Policy
Configure Content Security Policy for your player
Self-host the player
Serve the player from your own origin for offline or restricted-network deployments