Skip to content

GuideGetting Started

HTML Installation Guide

Install Video.js with HTML custom elements and build an accessible, customizable video player

Video.js is an HTML video player built on custom elements: lightweight, framework-free components for building accessible, customizable players with minimal bundle sizes, advanced features, and consistency 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 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

Choose the app environment that controls the setup commands and file locations below.

ViteFast app and development serverAstroContent-focused sites with islandsLaravelLaravel app with Vite assetsExisting siteExisting site whose build bundles JavaScript

Choose your use case

The default presets work well for general website playback. The live presets suit streams: they add a Live button and drop the duration and current-time displays that on-demand playback relies on. More pre-built players to come.

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

Video.js plays plain files, adaptive streams, and embeds from hosting services, and switching between them is a one-line change. Paste a URL to detect the type, pick one directly, or upload a video to Mux.

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

Choose whether to create the selected 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 vanilla-ts --no-interactive
pnpm install

Install the packages

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

Add your player

  1. Add the imports

    import '@videojs/html/video/player';
import '@videojs/html/video/skin';

  2. Add the player markup

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

<script type="module" src="/src/player.ts"></script>

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.

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
UI components
Explore the building blocks used by skins and custom controls
Build your own component
Connect custom UI to player state and actions

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.