CDN

The files the Video.js CDN serves and the layout rules behind their URLs

Video.js can run straight from <script> tags. Our CDN serves @videojs/html in prebuilt, browser-ready bundles which register custom elements. For many pages, it takes only one script tag:

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

<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>

URLs

Every file the CDN serves follows one URL pattern:

https://cdn.jsdelivr.net/npm/@videojs/html@<version>/cdn/<file>

Player bundles

Each installation preset ships its bundles at the root of cdn/: one per skin choice, plus a player-only bundle. For the video preset:

File	Registers
`video.js`	`<video-player>`, `<video-skin>`, and the UI elements the skin composes
`video-minimal.js`	`<video-player>`, `<video-minimal-skin>`, and the UI elements the minimal skin composes
`video-player.js`	`<video-player>` alone, for markup without a packaged skin

The other presets follow the same pattern. Background video is the exception: one bundle, background.js, registers the player, the skin, and the <background-video> media element.

A skin bundle registers every UI element its skin is built from. The CDN publishes no per-component bundles, though. If you’ve ejected the skin and need to add new components, install from npm instead of from the CDN.

Media bundles

The default presets play through the browser’s own <video> and <audio>. Every other media element is its own bundle under media/, loaded beside the player bundle:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/video.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/media/hlsjs-video.js"></script>

Each path mirrors its npm subpath. Elements with more than one playback engine keep the extra flavors in a directory named for the element, such as media/mux-video/spf.js. Load one flavor per page: every flavor claims the same tag name, and the first registration wins.

Extension bundles

Each extension is its own bundle under extensions/, loaded beside the player and media bundles:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/video.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/media/mux-video.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/extensions/mux-data.js"></script>

As with media, each path mirrors its npm subpath: extensions/mux-data.js registers the element that @videojs/html/extensions/mux-data does.

Locales

English ships inside the skin bundles. Each other locale is a bundle under locales/ that registers its translations on import. Load it before the player script to avoid a flash of English:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/locales/es.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/cdn/video.js"></script>

One bundle exists per locale pack, plus bare-language aliases such as pt. For custom strings, see Internationalize the player.

Stylesheets

The skin bundles inline their CSS, so no <link> is required to render. The separate .css files do the jobs a bundle cannot:

global.css holds the light-DOM rules. Link it in <head> and the player reserves its space before the elements upgrade. The background preset uses background.css instead.
The skin sheets, such as video.css beside video.js, style declaratively rendered skins.
shared.css is the base that hand-written shadow skins build on.

Self-host the player shows both in use.

Development bundles

Every JavaScript entry has a .dev.js sibling, such as video.dev.js, built with development warnings on. Swap the suffix while debugging; swap it back to ship.

Shared chunks

Everything else at the root, like the content-hashed default-*.js files, is a shared chunk the entries import by relative path. Entries share these chunks, so loading several bundles stays cheap. Chunk names change every release: never link a chunk directly, and never copy a lone entry file. To mirror the CDN, copy the whole cdn/ directory and keep its layout; Self-host the player covers it.