@videojs/html 10.1.0 → 10.3.0

package/dist/dev/ui/volume-slider/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/volume-slider/element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs, type VolumeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createWheelStep,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectControls,\n  selectVolume,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class VolumeSliderElement extends UIElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    wheelStep: { type: Number, attribute: 'wheel-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof VolumeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  wheelStep = VolumeSliderCore.defaultProps.wheelStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    const isDisabled = () => {\n      const volume = this.#volumeState.value;\n\n      return this.disabled || !volume || volume.volumeAvailability !== 'available';\n    };\n\n    const getPercent = () => (this.#volumeState.value?.volume ?? 0) * 100;\n    const getStepPercent = () => this.#core.getStepPercent();\n    const setVolume = (percent: number) => this.#setVolume(percent);\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled,\n      getPercent,\n      getStepPercent,\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: setVolume,\n      onValueCommit: setVolume,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    const wheelProps = createWheelStep({\n      isDisabled,\n      getPercent,\n      getStepPercent: () => this.#core.getWheelStepPercent(),\n      onValueChange: (percent) => this.#volumeState.value?.setVolume(this.#core.rawValueFromPercent(percent) / 100),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyElementProps(this, wheelProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, VolumeSliderDataAttrs);\n    applyElementProps(this, { hidden: state.hidden ? '' : undefined });\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: VolumeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/volume-slider/element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs, type VolumeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createWheelStep,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectControls,\n  selectVolume,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class VolumeSliderElement extends UIElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    wheelStep: { type: Number, attribute: 'wheel-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof VolumeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  wheelStep = VolumeSliderCore.defaultProps.wheelStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    const isDisabled = () => {\n      const volume = this.#volumeState.value;\n\n      return this.disabled || !volume || volume.volumeAvailability !== 'available';\n    };\n\n    const getPercent = () => (this.#volumeState.value?.volume ?? 0) * 100;\n    const getStepPercent = () => this.#core.getStepPercent();\n    const setVolume = (percent: number) => this.#setVolume(percent);\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled,\n      getPercent,\n      getStepPercent,\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: setVolume,\n      onValueCommit: setVolume,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      // Only edge alignment depends on the slider's size.\n      onResize: () => {\n        if (this.thumbAlignment === 'edge') this.requestUpdate();\n      },\n    });\n\n    const wheelProps = createWheelStep({\n      isDisabled,\n      getPercent,\n      getStepPercent: () => this.#core.getWheelStepPercent(),\n      onValueChange: (percent) => this.#volumeState.value?.setVolume(this.#core.rawValueFromPercent(percent) / 100),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyElementProps(this, wheelProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, VolumeSliderDataAttrs);\n    applyElementProps(this, { hidden: state.hidden ? '' : undefined });\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: VolumeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}

package/dist/dev/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.1.0";
+		return "10.3.0";
 	} catch {}
 	return "UNKNOWN";
 };

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/html documentation
 
-Bundled markdown documentation for `@videojs/html` v10.1.0.
+Bundled markdown documentation for `@videojs/html` v10.3.0.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/guides/autoplay.md

@@ -87,7 +87,7 @@ import '@videojs/html/ui/play-button';
 
 The `autoplay`, `muted`, and `playsinline` attributes on `<video>` and similar media components pass through to the underlying media element. The media element applies the attributes it supports and requests playback as soon as it has enough data.
 
-The [playback feature](../reference/api/feature-playback.md) reflects the result in player state. When autoplay succeeds, `paused` becomes `false` and `started` becomes `true`. When the browser blocks autoplay, the player stays `paused: true` with `started: false`, and the [Play button](../reference/components/play-button.md) renders its play state. There is no separate autoplay failure event: a blocked autoplay looks like media that never started.
+The [playback feature](../reference/api/feature-playback.md) reflects the result in player state. While the media is trying to autoplay, `autoplaying` is `true`: the [Play button](../reference/components/play-button.md) shows pause, so clicking it cancels the autoplay, and the [Buffering indicator](../reference/components/buffering-indicator.md) appears after its delay. When autoplay succeeds, `paused` becomes `false` and `started` becomes `true`. When the browser blocks autoplay, the player stays `paused: true` with `started: false`, and the [Play button](../reference/components/play-button.md) renders its play state. There is no separate autoplay failure event: a blocked autoplay looks like media that never started.
 
 Calling `play()` from player state returns the native promise from the media element. When the browser blocks playback, that promise rejects with a `NotAllowedError`.
 

package/docs/guides/browser-support.md

@@ -12,10 +12,12 @@ Browsers and rendering environments supported by Video.js 10, and how the packag
 | Safari | 16.4 and later |
 | Safari on iOS | 16.4 and later |
 
-These versions account for 91.5% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001810, and this figure updates when we update that data.
+These versions account for 92.5% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001815, and this figure updates when we update that data.
 
 We test in and fix bugs for these versions. Each minimum comes from a feature with no fallback: `:has()` sets Firefox, [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) and [`oklch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) set Chrome and Edge (Chrome 111, Firefox 113, Safari 16.2), and the JavaScript sets Safari, because it uses ES2022 syntax and [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets). Newer JavaScript APIs are feature-detected.
 
+These versions apply to every skin. The [Compat and Scaffold skins](./skins.md#choose-a-skin) avoid newer visual effects such as backdrop blur, anchor-positioned menu highlights, and squircle corners, so they look the same in browsers that skip them. They still need the CSS features below.
+
 ## CSS requirements
 
 The packaged skins are generated CSS, and the build lowers them for the browsers above. It flattens CSS nesting, adds vendor prefixes such as `-webkit-backdrop-filter`, and writes each skin’s scope as a [`:where()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) selector, which adds no specificity, rather than [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope).
@@ -36,16 +38,16 @@ The table reads the first fully supporting version of each feature from [caniuse
 
 | Feature | Chrome and Edge | Firefox | Safari and iOS | Global support |
 | --- | --- | --- | --- | --- |
-| [`@scope`](https://caniuse.com/css-cascade-scope) Has a fallback. Packaged skins use :where() selectors instead; registry CSS skins need it. | 118 | 146 | 17.4 | 90.0% |
-| [`@layer`](https://caniuse.com/css-cascade-layers) Required. No component styling. | 99 | 97 | 15.4 | 95.3% |
-| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. | 105 | 121 | 15.4 | 94.1% |
-| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. | 106 | 110 | 16 | 94.0% |
-| [`Media query range syntax`](https://caniuse.com/css-media-range-syntax) Required. Large-screen sizing is lost. | 104 | 63 | 16.4 | 94.0% |
-| [`:dir()`](https://caniuse.com/css-dir-pseudo) Has a fallback. Right-to-left layout follows the dir attribute instead. | 120 | 17 | 16.4 | 91.4% |
-| [`Relative color syntax`](https://caniuse.com/css-relative-colors) Degrades. Control scrims fall back to color-mix(), and subtle shadows are lost. | 131 | 133 | 18 | 85.7% |
-| [`scrollbar-color and scrollbar-width`](https://caniuse.com/css-scrollbar) Degrades. Menus show default scrollbars. | 121 | 64 | 26.2 | 85.6% |
-| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. | 76 / 17 | 103 | 9 | 95.7% |
-| [`Anchor positioning`](https://caniuse.com/css-anchor-positioning) Has a fallback. Popups are positioned by JavaScript. | 125 | 147 | 26 | 84.1% |
+| [`@scope`](https://caniuse.com/css-cascade-scope) Has a fallback. Packaged skins use :where() selectors instead; registry CSS skins need it. | 118 | 146 | 17.4 | 91.7% |
+| [`@layer`](https://caniuse.com/css-cascade-layers) Required. No component styling. | 99 | 97 | 15.4 | 96.0% |
+| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. | 105 | 121 | 15.4 | 94.8% |
+| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. | 106 | 110 | 16 | 94.8% |
+| [`Media query range syntax`](https://caniuse.com/css-media-range-syntax) Required. Large-screen sizing is lost. | 104 | 63 | 16.4 | 94.8% |
+| [`:dir()`](https://caniuse.com/css-dir-pseudo) Has a fallback. Right-to-left layout follows the dir attribute instead. | 120 | 17 | 16.4 | 92.5% |
+| [`Relative color syntax`](https://caniuse.com/css-relative-colors) Degrades. Control scrims fall back to color-mix(), and subtle shadows are lost. | 131 | 133 | 18 | 87.0% |
+| [`scrollbar-color and scrollbar-width`](https://caniuse.com/css-scrollbar) Degrades. Menus show default scrollbars. | 121 | 64 | 26.2 | 87.0% |
+| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. | 76 / 17 | 103 | 9 | 96.4% |
+| [`Anchor positioning`](https://caniuse.com/css-anchor-positioning) Has a fallback. Popups are positioned by JavaScript. | Not supported | Not supported | 27 | 0.0% |
 
 Older browsers than the baseline are not tested. Without `:has()`, `@container`, `@layer`, `color-mix()`, or `oklch()`, the skins lose focus states, layout, or colors.
 

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

@@ -0,0 +1,383 @@
+# 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. You need [Node.js](https://nodejs.org/) to create the project, run the workbench that previews your skin, and deploy it. Run `node -v` to see which version you have. If you don’t have Node.js, or yours is a few years old, install the latest LTS release.
+
+**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
+```
+
+The agent runs the same commands as you would, so it needs Node.js too. If Node.js isn’t installed, you can ask the agent to install it, but it may need your permission or your password to do so.
+
+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

@@ -25,6 +25,7 @@ Each installation [preset](./presets.md) ships its bundles at the package root:
 | `video.js` | `<video-player>`, `<video-skin>`, and the UI elements the skin composes |
 | `video-neutral.js` | `<video-player>`, `<video-neutral-skin>`, and the UI elements the neutral skin composes |
 | `video-compat.js` | `<video-player>`, `<video-compat-skin>`, and the UI elements the compat skin composes |
+| `video-scaffold.js` | `<video-player>`, `<video-scaffold-skin>`, and the UI elements the scaffold 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 component.
@@ -36,8 +37,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.3.0/video-player.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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 +48,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.3.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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 +59,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.3.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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 +71,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.3.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.3.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/content-security-policy.md

@@ -40,9 +40,12 @@ Add only the origins for the providers you use. Extend `script-src` with their s
 | --- | --- | --- |
 | YouTube | `https://www.youtube.com` | `https://www.youtube.com` or `https://www.youtube-nocookie.com`, depending on your source URL |
 | Vimeo | — | `https://player.vimeo.com`; `https://vimeo.com` for live events |
+| SoundCloud | — | `https://w.soundcloud.com` |
+| Mixcloud | \- | `https://player-widget.mixcloud.com` |
 | Spotify | `https://open.spotify.com` | `https://open.spotify.com` |
 | TikTok | — | `https://www.tiktok.com` |
 | Twitch | — | `https://player.twitch.tv` |
+| Dailymotion | `https://geo.dailymotion.com` | `https://geo.dailymotion.com` |
 | Cloudflare | `https://embed.videodelivery.net` | `https://iframe.videodelivery.net` or your `https://customer-<code>.cloudflarestream.com` origin |
 | Google Cast | `https://www.gstatic.com` | — |
 | Wistia | `https://fast.wistia.com` and `https://fast.wistia.net` | `https://fast.wistia.com` and `https://fast.wistia.net` if the SDK falls back to an iframe |

package/docs/guides/customize-skins.md

@@ -2,7 +2,9 @@
 
 Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
 
-Start with the path that matches the change you want:
+Pick the skin closest to the design you want first. To apply your brand to a finished design, the Neutral skin is the usual starting point. To build your own design, start from the Scaffold skin. See [Choose a skin](./skins.md#choose-a-skin).
+
+Then start with the path that matches the change you want:
 
 | If you want to… | Use this path |
 | --- | --- |
@@ -36,7 +38,7 @@ Packaged skins expose [CSS custom properties](https://developer.mozilla.org/en-U
 
 If you omit `--media-accent-text-color`, the skins choose a contrasting text color from `--media-accent-color` using [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color). Browsers before Chrome 147, Firefox 146, and Safari 26 lack `contrast-color()` and use the theme’s default text color instead, which suits only the default accent, so set both properties together if you support those browsers.
 
-The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font.
+The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font. The Scaffold skin inherits your page’s font instead, and it has no hairline, so `--media-border-color` doesn’t change it.
 
 The media component and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See [Add a poster and loading placeholder](./poster.md).
 
@@ -127,7 +129,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 +140,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/features.md

@@ -74,7 +74,7 @@ if (media?.paused) media.play();
 
 ## Feature availability
 
-Volume, fullscreen, and picture-in-picture expose availability properties because platform support varies. Volume has two independent properties: `volumeAvailability` for changing the volume level and `mutedAvailability` for toggling mute. For example, iOS Safari allows muting but doesn’t allow programmatic volume control.
+Volume, playback rate, fullscreen, and picture-in-picture expose availability properties because platform and media support varies. Volume has two independent properties: `volumeAvailability` for changing the volume level and `mutedAvailability` for toggling mute. For example, iOS Safari allows muting but doesn’t allow programmatic volume control.
 
 | Value | Meaning |
 | --- | --- |