@videojs/html 10.1.0 → 10.2.0

package/docs/guides/build-your-own-skin.md

@@ -0,0 +1,381 @@
+# Build your own skin
+
+Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
+
+A skin is the player interface: markup that arranges Video.js UI components inside the player, plus the styles that give it a look. The components handle playback state, keyboard support, and accessibility, so building your own skin is mostly a layout and design job. [Skins](./skins.md) explains how skins fit into Video.js.
+
+If a packaged skin is already close to what you want, [Customize skins](./customize-skins.md) is less work.
+
+## Create a skin project
+
+The quickest way to start is a standalone skin project:
+
+**npm**
+
+```bash
+npx @videojs/cli skin create
+```
+
+**pnpm**
+
+```bash
+pnpm dlx @videojs/cli skin create
+```
+
+**yarn**
+
+```bash
+npx @videojs/cli skin create --package-manager yarn
+```
+
+**bun**
+
+```bash
+bunx @videojs/cli skin create
+```
+
+The command asks for a name, a framework (React or HTML), a styling approach (Tailwind or CSS), a starting skin, and a preset (video, audio, live video, or live audio). The starting skin defaults to [Scaffold](../reference/components/video-scaffold-skin.md): every control wired up, with minimal styling and no transitions, so there’s little to undo.
+
+The project goes in a folder named after the skin, so a skin called “My Skin” goes in `my-skin`. Open it and start the preview:
+
+**npm**
+
+```bash
+cd my-skin
+npm run dev
+```
+
+**pnpm**
+
+```bash
+cd my-skin
+pnpm dev
+```
+
+**yarn**
+
+```bash
+cd my-skin
+yarn dev
+```
+
+**bun**
+
+```bash
+cd my-skin
+bun dev
+```
+
+The project has two parts:
+
+- **`src/`** holds the skin and nothing else. Edit it however you like, including its markup, class names, theme tokens, and stylesheets.
+- **`apps/preview/`** is a workbench that plays your skin. Use it to try different player sizes and aspect ratios, light and dark color schemes, right-to-left text, every built-in language, and playback settings such as autoplay and loop.
+
+When you want to share it, deploy the workbench to Vercel, Netlify, or Cloudflare Pages:
+
+**npm**
+
+```bash
+npm run deploy
+```
+
+**pnpm**
+
+```bash
+pnpm run deploy
+```
+
+**yarn**
+
+```bash
+yarn run deploy
+```
+
+**bun**
+
+```bash
+bun run deploy
+```
+
+Add the host’s name to skip the question, as in `npm run deploy vercel`. With pnpm, keep the `run`, since `pnpm deploy` is a built-in pnpm command. When the skin is done, move `src/` into your app.
+
+### Build it with a coding agent
+
+If you work with a coding agent, such as Claude Code, Codex, or Cursor, it can do all of this for you. Install the Video.js skills, which include a skill for building skins:
+
+```bash
+npx @videojs/cli agents skills
+```
+
+Then ask your agent something like “Help me design my own Video.js skin for our podcast player.” It asks for the same choices as the command, creates the project, starts the workbench, and agrees a design with you before styling. It can also match an existing player’s look from a screenshot or a link, then checks its work against the reference and for accessibility before handing back. [Build with AI](./build-with-ai.md) covers installing the skills in each agent.
+
+## Other starting points
+
+- **Inside an existing app.** Add a skin’s source with [Install with Shadcn](./installation-shadcn.md) and pick **Scaffold** as the skin.
+- **From nothing.** Put a [Container](../reference/components/player-container.md) inside your player and add the components you want, as in the example below.
+
+No path requires Scaffold’s structure, its theme tokens, or any particular CSS approach.
+
+## A minimal skin
+
+This example shows how a skin fits together without Scaffold’s extra parts. It has a play button, a timeline, the current time, mute, fullscreen, keyboard shortcuts, screen reader announcements, and an error dialog. The player provides state, the Container is the skin’s root, and the media element goes inside the Container next to the controls.
+
+**index.html**
+
+```html
+<script type="module">
+  import '@videojs/html/video/player';
+  import '@videojs/html/ui/container';
+  import '@videojs/html/ui/controls';
+  import '@videojs/html/ui/controls-content';
+  import '@videojs/html/ui/controls-group';
+  import '@videojs/html/ui/play-button';
+  import '@videojs/html/ui/time-slider';
+  import '@videojs/html/ui/slider-track';
+  import '@videojs/html/ui/slider-buffer';
+  import '@videojs/html/ui/slider-fill';
+  import '@videojs/html/ui/slider-thumb';
+  import '@videojs/html/ui/time';
+  import '@videojs/html/ui/mute-button';
+  import '@videojs/html/ui/fullscreen-button';
+  import '@videojs/html/ui/hotkey';
+  import '@videojs/html/ui/status-announcer';
+  import '@videojs/html/ui/error-dialog';
+  import '@videojs/html/ui/dialog-popup';
+  import '@videojs/html/ui/dialog-title';
+  import '@videojs/html/ui/dialog-description';
+  import '@videojs/html/ui/dialog-close';
+</script>
+
+<video-player>
+  <media-container class="video-skin">
+    <video src="video.mp4" playsinline></video>
+
+    <media-controls>
+      <media-controls-content class="video-skin-controls">
+        <media-time-slider class="video-skin-time-slider">
+          <media-slider-track class="video-skin-track">
+            <media-slider-buffer class="video-skin-buffer"></media-slider-buffer>
+            <media-slider-fill class="video-skin-fill"></media-slider-fill>
+          </media-slider-track>
+          <media-slider-thumb class="video-skin-thumb"></media-slider-thumb>
+        </media-time-slider>
+
+        <media-controls-group class="video-skin-controls-group" aria-label="Playback controls">
+          <media-play-button class="video-skin-play">
+            <span class="show-when-paused">Play</span>
+            <span class="show-when-playing">Pause</span>
+          </media-play-button>
+          <media-time type="current"></media-time>
+          <media-mute-button class="video-skin-mute">
+            <span class="show-when-muted">Unmute</span>
+            <span class="show-when-unmuted">Mute</span>
+          </media-mute-button>
+          <media-fullscreen-button class="video-skin-fullscreen">
+            <span class="show-when-fullscreen">Exit fullscreen</span>
+            <span class="show-when-not-fullscreen">Fullscreen</span>
+          </media-fullscreen-button>
+        </media-controls-group>
+      </media-controls-content>
+    </media-controls>
+
+    <media-hotkey keys="Space" action="togglePaused"></media-hotkey>
+    <media-hotkey keys="m" action="toggleMuted"></media-hotkey>
+    <media-hotkey keys="f" action="toggleFullscreen"></media-hotkey>
+    <media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey>
+    <media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey>
+
+    <media-status-announcer></media-status-announcer>
+
+    <media-error-dialog>
+      <media-dialog-popup class="video-skin-error">
+        <media-dialog-title></media-dialog-title>
+        <media-dialog-description></media-dialog-description>
+        <media-dialog-close></media-dialog-close>
+      </media-dialog-popup>
+    </media-error-dialog>
+  </media-container>
+</video-player>
+```
+
+The `@videojs/html/video/player` import registers `<video-player>` with the video features, which hold the state these controls need. Some controls, such as Cast or Quality, depend on features that not every preset includes. Each control’s reference page names the feature it needs.
+
+This CSS places the controls over the video, hides them when the viewer is idle, draws the timeline, and keeps the error dialog hidden until playback fails:
+
+**video-skin.css**
+
+```css
+.video-skin {
+  position: relative;
+  display: block;
+}
+
+.video-skin video {
+  display: block;
+  width: 100%;
+}
+
+.video-skin-controls {
+  position: absolute;
+  inset: auto 0 0;
+  padding: 12px;
+  background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
+  color: white;
+  transition: opacity 0.25s;
+}
+
+/* Keep controls visible while something inside them has keyboard focus. */
+.video-skin-controls:not([data-visible]):not(:has(:focus-visible)) {
+  opacity: 0;
+}
+
+.video-skin-controls-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* The slider sets its progress as CSS custom properties. */
+.video-skin-time-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  cursor: pointer;
+}
+
+.video-skin-track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: rgb(255 255 255 / 0.3);
+  border-radius: 9999px;
+}
+
+.video-skin-buffer,
+.video-skin-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+
+.video-skin-buffer {
+  width: var(--media-slider-buffer);
+  background: rgb(255 255 255 / 0.4);
+}
+
+.video-skin-fill {
+  width: var(--media-slider-fill);
+  background: white;
+}
+
+.video-skin-thumb {
+  position: absolute;
+  left: var(--media-slider-fill);
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  translate: -50% 0;
+}
+
+.video-skin-error {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  gap: 12px;
+  place-content: center;
+  padding: 24px;
+  background: rgb(0 0 0 / 0.85);
+  color: white;
+  text-align: center;
+}
+
+.video-skin-error:not([data-open]) {
+  display: none;
+}
+```
+
+Each button in the HTML example holds a label for every state. Show only the one that matches:
+
+**video-skin.css**
+
+```css
+.video-skin-play:not([data-paused]) .show-when-paused,
+.video-skin-play[data-paused] .show-when-playing,
+.video-skin-mute:not([data-muted]) .show-when-muted,
+.video-skin-mute[data-muted] .show-when-unmuted,
+.video-skin-fullscreen:not([data-fullscreen]) .show-when-fullscreen,
+.video-skin-fullscreen[data-fullscreen] .show-when-not-fullscreen {
+  display: none;
+}
+```
+
+From here, add the components your design needs.
+
+## Pick the components
+
+Each skin is made of the same building blocks. Use the ones your design needs; their reference pages cover props, state, data attributes, and examples.
+
+| Purpose | Components |
+| --- | --- |
+| Player surface, fullscreen and activity target | [Container](../reference/components/player-container.md) |
+| Show and hide controls with user activity | [Controls](../reference/components/controls.md) |
+| Playback buttons | [Play button](../reference/components/play-button.md), [Seek button](../reference/components/seek-button.md), [Mute button](../reference/components/mute-button.md), [Playback rate button](../reference/components/playback-rate-button.md), [Live button](../reference/components/live-button.md) |
+| Screen and device buttons | [Fullscreen button](../reference/components/fullscreen-button.md), [Picture-in-picture button](../reference/components/pip-button.md), [AirPlay button](../reference/components/airplay-button.md), [Cast button](../reference/components/cast-button.md), [Captions button](../reference/components/captions-button.md) |
+| Timeline and volume | [Time slider](../reference/components/time-slider.md), [Volume slider](../reference/components/volume-slider.md), [Volume popover](../reference/components/volume-popover.md), [Thumbnail](../reference/components/thumbnail.md), [Time](../reference/components/time.md) |
+| Menus and popups | [Menu](../reference/components/menu.md), [Popover](../reference/components/popover.md), [Tooltip](../reference/components/tooltip.md), and the radio groups for [captions](../reference/components/captions-radio-group.md), [quality](../reference/components/quality-radio-group.md), [playback rate](../reference/components/playback-rate-radio-group.md), and [audio tracks](../reference/components/audio-track-radio-group.md) |
+| Media details and loading | [Title](../reference/components/title.md), [Poster](../reference/components/poster.md), [Buffering indicator](../reference/components/buffering-indicator.md) |
+| Feedback after an action | [Seek indicator](../reference/components/seek-indicator.md), [Volume indicator](../reference/components/volume-indicator.md), [Status indicator](../reference/components/status-indicator.md) |
+| Errors | [Error dialog](../reference/components/error-dialog.md) |
+| Keyboard, gestures, and announcements | [Hotkey](../reference/components/hotkey.md), [Gesture](../reference/components/gesture.md), [Status announcer](../reference/components/status-announcer.md) |
+| Icons | [Icons](../reference/components/icons.md) |
+
+Some of these are easy to leave out by accident because they have little or no visible UI. Include the error dialog, keyboard shortcuts, and status announcer unless you replace them with your own.
+
+Import the registration for every element you use, including the parts of compound components. Each reference page lists its imports.
+
+To build a control Video.js doesn’t provide, follow [Build your own UI component](./build-your-own-component.md).
+
+## Style it your way
+
+The components bring no visual styles. You add the icons, text, and CSS. They describe their state with `data-*` attributes, such as `data-paused` on the play button, so you can style them with plain CSS, Tailwind, or anything else. [UI components](./ui-components.md) explains how. [Automatically show and hide controls](./controls.md) covers the controls’ visibility states.
+
+Lay out controls in source order that matches their visual order, so keyboard focus follows the layout.
+
+A player’s controls sit over a moving picture, in a frame whose size you don’t control, so a few design questions come up in every skin:
+
+- **Surfaces over video.** Borders, shadows, and translucent backgrounds look different over every frame. [Shapes and surfaces](https://videojs.org/blog/videojs-v10-skin-design#shapes-and-surfaces) and [Letting the content influence the color](https://videojs.org/blog/videojs-v10-skin-design#letting-the-content-influence-the-color) cover how our skins handle them.
+- **Readable controls.** Seek tracks need a visible target, icons need optical alignment, and time displays need fixed-width digits. See [Controls and typography](https://videojs.org/blog/videojs-v10-skin-design#controls-and-typography).
+- **Motion.** Menus should open from the control that opened them and respond when they’re closed mid-transition. See [Motion and transitions](https://videojs.org/blog/videojs-v10-skin-design#motion-and-transitions).
+- **Small players.** Captions, settings, picture-in-picture, and Cast all compete for space at narrow widths. See [Fitting the available space](https://videojs.org/blog/videojs-v10-skin-design#fitting-the-available-space).
+- **Custom colors.** An accent color someone else picks still needs contrast against its text and the video. See [Customization and contrast](https://videojs.org/blog/videojs-v10-skin-design#customization-and-contrast).
+
+[Design inspiration behind the Video.js v10 skins](https://videojs.org/blog/videojs-v10-skin-design) covers the thinking behind our own skins in full.
+
+## Support the public CSS properties
+
+If the skin is only for your own site, you can skip this.
+
+If you want to offer it as a Video.js skin, support the same CSS custom properties as the packaged skins, such as `--media-accent-color` and `--media-border-radius`. People can then restyle your skin the same way they restyle ours. [Set the skin’s styles](./customize-skins.md#set-the-skins-styles) lists them. We’re still working out how to accept community skins into Video.js.
+
+## Test it
+
+Check the finished skin with real media, at the narrowest player size you support:
+
+- Play, pause, seek, change volume, open every menu, and enter fullscreen.
+- Use only a keyboard, then only touch. Focus stays visible and follows the layout, and controls hide when idle.
+- Check loading, errors, ended playback, captions, and controls the browser doesn’t support.
+- Check text and icon contrast over bright and dark footage, with forced colors, and with reduced motion.
+
+[Accessibility](./accessibility.md) covers these checks in more detail.
+
+## Related pages
+
+### Guides
+
+- [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
+- [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.

package/docs/guides/cdn.md

@@ -36,8 +36,8 @@ A skin bundle registers every UI element its skin is built from. Any element the
 Each [UI element](./ui-components.md) is its own bundle under `ui/`, for markup that a skin bundle does not already cover: a player-only bundle, [skin source](./customize-skins.md#style-skin-source) that adds a component the packaged skin lacks, or a [dialog](../reference/components/dialog.md) your page opens beside a packaged skin.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video-player.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/play-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-player.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/play-button.js"></script>
 ```
 
 Each path mirrors its npm subpath: `ui/play-button.js` registers the element that `@videojs/html/ui/play-button` does. Compound components list one bundle per part in their reference page’s Import section, and all of the bundles share chunks with the player.
@@ -47,8 +47,8 @@ Each path mirrors its npm subpath: `ui/play-button.js` registers the element tha
 The default presets play through the browser’s own `<video>` and `<audio>`. Every other [media component](./media-sources.md) is its own bundle under `media/`, loaded beside the player bundle:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/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.
@@ -58,9 +58,9 @@ Each path mirrors its npm subpath. Elements with more than one playback engine k
 Each [extension](./architecture.md) is its own bundle under `extensions/`, loaded beside the player and media bundles:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/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.
@@ -70,8 +70,8 @@ As with media, each path mirrors its npm subpath: `extensions/mux-data.js` regis
 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:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 One bundle exists per locale pack, plus bare-language aliases such as `pt`. For custom strings, see [Internationalize the player](./internationalization.md).

package/docs/guides/customize-skins.md

@@ -127,7 +127,7 @@ Installed files belong to your project, so an update replaces your local copy. C
 npx shadcn@latest add @videojs/video --overwrite
 ```
 
-To understand how skins fit into Video.js, read [Skins](./skins.md). To create a control instead of editing one, follow [Build your own component](./build-your-own-component.md).
+To understand how skins fit into Video.js, read [Skins](./skins.md). To design a new interface from a minimal starting point, follow [Build your own skin](./build-your-own-skin.md). To create a control instead of editing one, follow [Build your own component](./build-your-own-component.md).
 
 ## Related pages
 
@@ -138,4 +138,5 @@ To understand how skins fit into Video.js, read [Skins](./skins.md). To create a
 ### Guides
 
 - [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
+- [Build your own skin](./build-your-own-skin.md): Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
 - [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.

package/docs/guides/installation-cdn.md

@@ -89,7 +89,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.1.0 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
+npx @videojs/cli@10.2.0 agents init --method cdn --framework html --project existing --preset video --skin default --media html5-video --extensions none --source-url https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4 --template none
 ```
 
 ## Load Video.js
@@ -101,7 +101,7 @@ Add these module scripts to the page head. Module scripts are deferred, so they
 _Merge this into the page `<head>`._
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 ## Add your player

package/docs/guides/installation-shadcn.md

@@ -94,7 +94,7 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.1.0 agents init --method shadcn --framework html --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 --styling css
+npx @videojs/cli@10.2.0 agents init --method shadcn --framework html --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 --styling css
 ```
 
 ## Configure app aliases

package/docs/guides/installation-svelte.md

@@ -90,13 +90,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.1.0 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
+npx @videojs/cli@10.2.0 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.1.0
+pnpm add @videojs/html@10.2.0
 ```
 
 ## Add your player

package/docs/guides/installation-vue.md

@@ -90,13 +90,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.1.0 agents init --method packaged --framework vue --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
+npx @videojs/cli@10.2.0 agents init --method packaged --framework vue --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.1.0
+pnpm add @videojs/html@10.2.0
 ```
 
 ## Register custom elements

package/docs/guides/installation.md

@@ -92,13 +92,13 @@ Defaulted options: project, preset, skin, source-url, media, extensions, templat
 ## Reproduce or change these instructions
 
 ```sh
-npx @videojs/cli@10.1.0 agents init --method packaged --framework html --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
+npx @videojs/cli@10.2.0 agents init --method packaged --framework html --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.1.0
+pnpm add @videojs/html@10.2.0
 ```
 
 ## Add your player

package/docs/guides/internationalization.md

@@ -199,8 +199,8 @@ import '@videojs/html/i18n/locales/ja/register';
 CDN locale modules call `registerI18n` on import. Pin every URL to the same version:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 Use the same pinned version for your locale pack, `i18n.js`, and player script. Copies loaded in the same window share a registry; matching versions keeps their translation keys and APIs compatible. Import the full locale pack before partial overrides, and register before the player loads to translate the first render:
@@ -208,15 +208,15 @@ Use the same pinned version for your locale pack, `i18n.js`, and player script.
 **my-locale.js**
 
 ```js
-import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/locales/es.js';
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/i18n.js';
+import 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/locales/es.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/i18n.js';
 
 registerI18n('es', { buttons: { play: 'Reproducir', pause: 'Pausa' } });
 ```
 
 ```html
 <script type="module" src="/my-locale.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 ### Switch locale at runtime

package/docs/guides/llms.txt

@@ -1,6 +1,6 @@
 # Video.js v10 — HTML Guides
 
-> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.1.0. Links are relative paths to files in this directory.
+> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.2.0. Links are relative paths to files in this directory.
 
 ## Getting Started
 
@@ -14,6 +14,7 @@ Install Video.js, customize a skin, understand its main pieces, check browser an
 - [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
 - [Architecture](./architecture.md): How Video.js players are structured — state, UI, media, and extensions
 - [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own skin](./build-your-own-skin.md): Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
 - [Why Video.js?](./why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
 - [Browser support](./browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
 - [Build with AI](./build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players

package/docs/guides/migrate-from-media-chrome.md

@@ -46,14 +46,14 @@ Before loading Video.js HTML, remove every Media Chrome import and CDN script fr
 For a page without a bundler, load the CDN video preset. It registers the player, the UI elements and icons used in the controller example below, and the `<media-i18n>` element:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 Some elements in the mapping table below need separate bundles. If you use any of these elements, also load its bundle:
 
-- `media-seek-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/seek-button.js`
-- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/playback-rate-button.js`
-- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/thumbnail.js`
+- `media-seek-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/seek-button.js`
+- `media-playback-rate-button`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/playback-rate-button.js`
+- `media-thumbnail`: `https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/thumbnail.js`
 
 Load each with `<script type="module" src="…"></script>`. See [CDN](./cdn.md) for individual component bundles.
 

package/docs/guides/migrate-from-mux-player.md

@@ -68,9 +68,9 @@ The examples keep a playback ID, analytics metadata, and a poster from two secon
 From the CDN, load the video [preset](./presets.md), the Mux media, and analytics:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/extensions/mux-data.js"></script>
 
 <video-player content-title="Test VOD">
   <video-skin style="aspect-ratio: 16 / 9">
@@ -421,8 +421,8 @@ Mux Player switches to live controls automatically. In Video.js, choose the live
 Register the live preset and Mux media. From the CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
 
 <live-video-player>
   <live-video-skin>
@@ -452,7 +452,7 @@ Use [`createPlayer`](../reference/api/html-create-player.md) to build a player e
 The live skin already includes a live button. If you build your own controls, use that same component and style it to match your app. It keeps track of whether playback is live and returns viewers to the newest available point in the stream.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.1.0/ui/live-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/live-button.js"></script>
 
 <media-live-button class="station-live-button">On air</media-live-button>
 ```