@videojs/html 10.0.0-rc.4 → 10.0.0-rc.5

package/dist/dev/ui/volume-indicator/element.d.ts

@@ -1,9 +1,9 @@
 import { LiveIndicator } from "../input-indicator/live-indicator.js";
 import { InputIndicatorElement } from "../input-indicator/element.js";
 import { index_d_exports } from "../../index.js";
-import { VolumeIndicatorCore } from "@videojs/core";
+import { VolumeIndicatorCore, VolumeIndicatorState } from "@videojs/core";
 //#region src/ui/volume-indicator/element.d.ts
-declare class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorCore.State> {
+export declare class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorState> {
   #private;
   static readonly tagName = "media-volume-indicator";
   static properties: {
@@ -15,12 +15,11 @@ declare class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicat
   closeDelay: number | undefined;
   protected get core(): VolumeIndicatorCore;
   protected get transition(): index_d_exports.TransitionApi;
-  protected get liveIndicator(): LiveIndicator<import("@videojs/core").VolumeIndicatorState>;
+  protected get liveIndicator(): LiveIndicator<VolumeIndicatorState>;
   protected get options(): {
     replayOnUpdate: false;
   };
   protected syncCoreProps(): void;
 }
 //#endregion
-export { VolumeIndicatorElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#i18n","#core","#transition","#liveIndicator","#options"],"sources":["../../../../src/ui/volume-indicator/element.ts"],"sourcesContent":["import {\n  createInputIndicatorLabels,\n  getVolumeIndicatorDisplayValue,\n  VolumeIndicatorCore,\n  VolumeIndicatorCSSVars,\n  VolumeIndicatorDataAttrs,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { InputIndicatorElement, type InputIndicatorOptions } from '../input-indicator/element';\nimport { LiveIndicator } from '../input-indicator/live-indicator';\n\nexport class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorCore.State> {\n  static readonly tagName = 'media-volume-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new VolumeIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: VolumeIndicatorDataAttrs,\n    render: renderVolumeIndicator,\n  });\n  readonly #options = { replayOnUpdate: false } satisfies InputIndicatorOptions;\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override get options() {\n    return this.#options;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({\n      closeDelay: this.closeDelay,\n      labels: createInputIndicatorLabels(this.#i18n.value),\n    });\n  }\n}\n\nfunction renderVolumeIndicator(element: HTMLElement, state: VolumeIndicatorCore.State): void {\n  const fill = element.querySelector<HTMLElement>('media-volume-indicator-fill');\n  const value = element.querySelector('media-volume-indicator-value');\n\n  if (state.fill) {\n    fill?.style.setProperty(VolumeIndicatorCSSVars.fill, state.fill);\n  } else {\n    fill?.style.removeProperty(VolumeIndicatorCSSVars.fill);\n  }\n\n  if (value) {\n    value.textContent = getVolumeIndicatorDisplayValue(state);\n  }\n}\n"],"mappings":";;;;;;;AAeA,IAAa,yBAAb,cAA4C,sBAAiD;;EACjE,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;EAAc,EACvD;;CAIA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CACzC,cAAuB,iBAAiB;CACxC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;CACV,CAAC;CACD,WAAoB,EAAE,gBAAgB,MAAM;CAE5C,IAAc,OAAO;EACnB,OAAO,KAAKC;CACd;CAEA,IAAc,aAAa;EACzB,OAAO,KAAKC;CACd;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAKC;CACd;CAEA,IAAuB,UAAU;EAC/B,OAAO,KAAKC;CACd;CAEA,gBAAyC;EACvC,KAAKH,MAAM,SAAS;GAClB,YAAY,KAAK;GACjB,QAAQ,2BAA2B,KAAKD,MAAM,KAAK;EACrD,CAAC;CACH;AACF;AAEA,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,OAAO,QAAQ,cAA2B,6BAA6B;CAC7E,MAAM,QAAQ,QAAQ,cAAc,8BAA8B;CAElE,IAAI,MAAM,MACR,MAAM,MAAM,YAAY,uBAAuB,MAAM,MAAM,IAAI;MAE/D,MAAM,MAAM,eAAe,uBAAuB,IAAI;CAGxD,IAAI,OACF,MAAM,cAAc,+BAA+B,KAAK;AAE5D"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/volume-indicator/element.ts"],"sourcesContent":["import {\n  createInputIndicatorLabels,\n  getVolumeIndicatorDisplayValue,\n  VolumeIndicatorCore,\n  VolumeIndicatorCSSVars,\n  VolumeIndicatorDataAttrs,\n  type VolumeIndicatorState,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { InputIndicatorElement, type InputIndicatorOptions } from '../input-indicator/element';\nimport { LiveIndicator } from '../input-indicator/live-indicator';\n\nexport class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorState> {\n  static readonly tagName = 'media-volume-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new VolumeIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: VolumeIndicatorDataAttrs,\n    render: renderVolumeIndicator,\n  });\n  readonly #options = { replayOnUpdate: false } satisfies InputIndicatorOptions;\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override get options() {\n    return this.#options;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({\n      closeDelay: this.closeDelay,\n      labels: createInputIndicatorLabels(this.#i18n.value),\n    });\n  }\n}\n\nfunction renderVolumeIndicator(element: HTMLElement, state: VolumeIndicatorState): void {\n  const fill = element.querySelector<HTMLElement>('media-volume-indicator-fill');\n  const value = element.querySelector('media-volume-indicator-value');\n\n  if (state.fill) {\n    fill?.style.setProperty(VolumeIndicatorCSSVars.fill, state.fill);\n  } else {\n    fill?.style.removeProperty(VolumeIndicatorCSSVars.fill);\n  }\n\n  if (value) {\n    value.textContent = getVolumeIndicatorDisplayValue(state);\n  }\n}\n"],"mappings":";;;;;;;AAgBA,IAAa,yBAAb,cAA4C,sBAA4C;;EAC5D,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;EAAc,EACvD;;CAIA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CACzC,cAAuB,iBAAiB;CACxC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;CACV,CAAC;CACD,WAAoB,EAAE,gBAAgB,MAAM;CAE5C,IAAc,OAAO;EACnB,OAAO,KAAK;CACd;CAEA,IAAc,aAAa;EACzB,OAAO,KAAK;CACd;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAK;CACd;CAEA,IAAuB,UAAU;EAC/B,OAAO,KAAK;CACd;CAEA,gBAAyC;EACvC,KAAK,MAAM,SAAS;GAClB,YAAY,KAAK;GACjB,QAAQ,2BAA2B,KAAK,MAAM,KAAK;EACrD,CAAC;CACH;AACF;AAEA,SAAS,sBAAsB,SAAsB,OAAmC;CACtF,MAAM,OAAO,QAAQ,cAA2B,6BAA6B;CAC7E,MAAM,QAAQ,QAAQ,cAAc,8BAA8B;CAElE,IAAI,MAAM,MACR,MAAM,MAAM,YAAY,uBAAuB,MAAM,MAAM,IAAI;MAE/D,MAAM,MAAM,eAAe,uBAAuB,IAAI;CAGxD,IAAI,OACF,MAAM,cAAc,+BAA+B,KAAK;AAE5D"}

package/dist/dev/ui/volume-indicator/fill.d.ts

@@ -1,8 +1,7 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/volume-indicator/fill.d.ts
-declare class VolumeIndicatorFillElement extends UIElement {
+export declare class VolumeIndicatorFillElement extends UIElement {
   static readonly tagName = "media-volume-indicator-fill";
 }
 //#endregion
-export { VolumeIndicatorFillElement };
 //# sourceMappingURL=fill.d.ts.map

package/dist/dev/ui/volume-indicator/value.d.ts

@@ -1,8 +1,7 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/volume-indicator/value.d.ts
-declare class VolumeIndicatorValueElement extends UIElement {
+export declare class VolumeIndicatorValueElement extends UIElement {
   static readonly tagName = "media-volume-indicator-value";
 }
 //#endregion
-export { VolumeIndicatorValueElement };
 //# sourceMappingURL=value.d.ts.map

package/dist/dev/ui/volume-popover/element.d.ts

@@ -2,11 +2,10 @@ import { PopoverElement } from "../popover/element.js";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/volume-popover/element.d.ts
 /** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */
-declare class VolumePopoverElement extends PopoverElement {
+export declare class VolumePopoverElement extends PopoverElement {
   #private;
   static readonly tagName = "media-volume-popover";
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { VolumePopoverElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/volume-popover/element.js

@@ -10,7 +10,7 @@ const unavailableVolume = {
 	volumeAvailability: "unsupported",
 	mutedAvailability: "unsupported",
 	setVolume: () => 0,
-	toggleMuted: () => false
+	setMuted: () => false
 };
 /** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */
 var VolumePopoverElement = class extends PopoverElement {

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#volume"],"sources":["../../../../src/ui/volume-popover/element.ts"],"sourcesContent":["import { VolumePopoverCore, VolumePopoverDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, selectVolume } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport type { MediaVolumeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { PopoverElement } from '../popover/element';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\n/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */\nexport class VolumePopoverElement extends PopoverElement {\n  static override readonly tagName = 'media-volume-popover';\n\n  readonly #core = new VolumePopoverCore();\n  readonly #volume = new PlayerController(this, playerContext, selectVolume);\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#core.setProps(this);\n    this.#core.setInput({\n      active: this.hasAttribute('data-open'),\n      status: this.hasAttribute('data-starting-style')\n        ? 'starting'\n        : this.hasAttribute('data-ending-style')\n          ? 'ending'\n          : 'idle',\n    });\n    this.#core.setMedia(this.#volume.value ?? unavailableVolume);\n\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, VolumePopoverDataAttrs);\n    this.hidden = state.hidden;\n\n    if (state.hidden) {\n      this.close();\n\n      if (this.triggerElement) {\n        applyElementProps(this.triggerElement, {\n          'aria-expanded': undefined,\n          'aria-haspopup': undefined,\n          'aria-controls': undefined,\n        });\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAGA,IAAa,uBAAb,cAA0C,eAAe;;EACpB,KAAA,UAAA;;CAEnC,QAAiB,IAAI,kBAAkB;CACvC,UAAmB,IAAI,iBAAiB,MAAM,eAAe,YAAY;CAEzE,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKA,MAAM,SAAS,IAAI;EACxB,KAAKA,MAAM,SAAS;GAClB,QAAQ,KAAK,aAAa,WAAW;GACrC,QAAQ,KAAK,aAAa,qBAAqB,IAC3C,aACA,KAAK,aAAa,mBAAmB,IACnC,WACA;EACR,CAAC;EACD,KAAKA,MAAM,SAAS,KAAKC,QAAQ,SAAS,iBAAiB;EAE3D,MAAM,QAAQ,KAAKD,MAAM,SAAS;EAElC,oBAAoB,MAAM,OAAO,sBAAsB;EACvD,KAAK,SAAS,MAAM;EAEpB,IAAI,MAAM,QAAQ;GAChB,KAAK,MAAM;GAEX,IAAI,KAAK,gBACP,kBAAkB,KAAK,gBAAgB;IACrC,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;GACnB,CAAC;EAEL;CACF;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/volume-popover/element.ts"],"sourcesContent":["import { VolumePopoverCore, VolumePopoverDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, selectVolume } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport type { MediaVolumeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { PopoverElement } from '../popover/element';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  setMuted: () => false,\n};\n\n/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */\nexport class VolumePopoverElement extends PopoverElement {\n  static override readonly tagName = 'media-volume-popover';\n\n  readonly #core = new VolumePopoverCore();\n  readonly #volume = new PlayerController(this, playerContext, selectVolume);\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#core.setProps(this);\n    this.#core.setInput({\n      active: this.hasAttribute('data-open'),\n      status: this.hasAttribute('data-starting-style')\n        ? 'starting'\n        : this.hasAttribute('data-ending-style')\n          ? 'ending'\n          : 'idle',\n    });\n    this.#core.setMedia(this.#volume.value ?? unavailableVolume);\n\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, VolumePopoverDataAttrs);\n    this.hidden = state.hidden;\n\n    if (state.hidden) {\n      this.close();\n\n      if (this.triggerElement) {\n        applyElementProps(this.triggerElement, {\n          'aria-expanded': undefined,\n          'aria-haspopup': undefined,\n          'aria-controls': undefined,\n        });\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,gBAAgB;AAClB;;AAGA,IAAa,uBAAb,cAA0C,eAAe;;EACpB,KAAA,UAAA;;CAEnC,QAAiB,IAAI,kBAAkB;CACvC,UAAmB,IAAI,iBAAiB,MAAM,eAAe,YAAY;CAEzE,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAK,MAAM,SAAS,IAAI;EACxB,KAAK,MAAM,SAAS;GAClB,QAAQ,KAAK,aAAa,WAAW;GACrC,QAAQ,KAAK,aAAa,qBAAqB,IAC3C,aACA,KAAK,aAAa,mBAAmB,IACnC,WACA;EACR,CAAC;EACD,KAAK,MAAM,SAAS,KAAK,QAAQ,SAAS,iBAAiB;EAE3D,MAAM,QAAQ,KAAK,MAAM,SAAS;EAElC,oBAAoB,MAAM,OAAO,sBAAsB;EACvD,KAAK,SAAS,MAAM;EAEpB,IAAI,MAAM,QAAQ;GAChB,KAAK,MAAM;GAEX,IAAI,KAAK,gBACP,kBAAkB,KAAK,gBAAgB;IACrC,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;GACnB,CAAC;EAEL;CACF;AACF"}

package/dist/dev/ui/volume-slider/element.d.ts

@@ -6,7 +6,7 @@ import { Text } from "@videojs/core/i18n";
  * @fires drag-start - Fired when a pointer drag starts.
  * @fires drag-end - Fired when a pointer drag ends.
  */
-declare class VolumeSliderElement extends UIElement {
+export declare class VolumeSliderElement extends UIElement {
   #private;
   static readonly tagName = "media-volume-slider";
   static properties: {
@@ -49,5 +49,4 @@ declare class VolumeSliderElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { VolumeSliderElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -103,7 +103,7 @@ var VolumeSliderElement = class extends UIElement {
 			isDisabled,
 			getPercent,
 			getStepPercent: () => this.#core.getWheelStepPercent(),
-			onValueChange: setVolume
+			onValueChange: (percent) => this.#volumeState.value?.setVolume(this.#core.rawValueFromPercent(percent) / 100)
 		});
 		applyElementProps(this, this.#slider.rootProps, { signal });
 		applyElementProps(this, wheelProps, { signal });

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#controlsState","#provider","#volumeState","#i18n","#disconnect","#setVolume","#slider","#releaseControlsLock","#releaseControlsVisibilityLock"],"sources":["../../../../src/ui/volume-slider/element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } 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 VolumeSliderCore.Props, '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: setVolume,\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      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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"}

package/dist/dev/version.d.ts

@@ -0,0 +1,21 @@
+//#region src/version.d.ts
+/**
+ * Version of the `@videojs/html` build in use, matching the package's published version — for example `'10.0.0-rc.4'`.
+ * The string is replaced at build time, so it identifies the exact published build rather than the version range a
+ * consumer installed, which makes it useful for bug reports, diagnostics, and analytics.
+ *
+ * Falls back to `'UNKNOWN'` when the source is consumed without the build-time replacement applied.
+ *
+ * @example
+ *   HTML player
+ *   ```ts
+ *   import { VERSION } from '@videojs/html';
+ *
+ *   console.log(VERSION); // '10.0.0-rc.4'
+ *   ```
+ *
+ * @internal
+ */
+export declare const VERSION: string;
+//#endregion
+//# sourceMappingURL=version.d.ts.map

package/dist/dev/version.js

@@ -0,0 +1,29 @@
+//#region src/version.ts
+const readVersion = () => {
+	try {
+		return "10.0.0-rc.5";
+	} catch {}
+	return "UNKNOWN";
+};
+/**
+* Version of the `@videojs/html` build in use, matching the package's published version — for example `'10.0.0-rc.4'`.
+* The string is replaced at build time, so it identifies the exact published build rather than the version range a
+* consumer installed, which makes it useful for bug reports, diagnostics, and analytics.
+*
+* Falls back to `'UNKNOWN'` when the source is consumed without the build-time replacement applied.
+*
+* @example
+*   HTML player
+*   ```ts
+*   import { VERSION } from '@videojs/html';
+*
+*   console.log(VERSION); // '10.0.0-rc.4'
+*   ```
+*
+* @internal
+*/
+const VERSION = readVersion();
+//#endregion
+export { VERSION };
+
+//# sourceMappingURL=version.js.map

package/dist/dev/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","names":[],"sources":["../../src/version.ts"],"sourcesContent":["const readVersion = (): string => {\n  try {\n    return __PLAYER_VERSION__;\n  } catch {}\n\n  return 'UNKNOWN';\n};\n\n/**\n * Version of the `@videojs/html` build in use, matching the package's published version — for example `'10.0.0-rc.4'`.\n * The string is replaced at build time, so it identifies the exact published build rather than the version range a\n * consumer installed, which makes it useful for bug reports, diagnostics, and analytics.\n *\n * Falls back to `'UNKNOWN'` when the source is consumed without the build-time replacement applied.\n *\n * @example\n *   HTML player\n *   ```ts\n *   import { VERSION } from '@videojs/html';\n *\n *   console.log(VERSION); // '10.0.0-rc.4'\n *   ```\n *\n * @internal\n */\nexport const VERSION: string = readVersion();\n"],"mappings":";AAAA,MAAM,oBAA4B;CAChC,IAAI;EACF,OAAA;CACF,QAAQ,CAAC;CAET,OAAO;AACT;;;;;;;;;;;;;;;;;;AAmBA,MAAa,UAAkB,YAAY"}

package/docs/README.md

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

package/docs/guides/autoplay.md

@@ -85,7 +85,7 @@ import '@videojs/html/ui/play-button';
 
 ## How it works
 
-The `autoplay`, `muted`, and `playsinline` attributes on `<video>` and similar media components pass through to the underlying media element. When the media element supports them, they’re applied, and playback is requested as soon as the media has enough data.
+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.
 
@@ -97,29 +97,16 @@ Calling `play()` from player state returns the native promise from the media ele
 - Muted autoplay is broadly allowed. Unmuted autoplay is blocked on first visit in most browsers; do not rely on it.
 - Without inline playback, iPhone Safari opens the video in fullscreen when playback starts.
 - Low-power mode and data-saver settings can block even muted autoplay. This is why the recommended approach keeps a manual play control.
-- Programmatic volume control is unsupported on some platforms. The [volume feature](../reference/api/feature-volume.md) exposes this as `volumeAvailability: 'available' | 'unavailable' | 'unsupported'`; iOS Safari reports `'unsupported'`, and `'unavailable'` means the feature hasn’t attached to a media element yet.
+- Programmatic volume control is unsupported on some platforms. The [volume feature](../reference/api/feature-volume.md) reports support through `volumeAvailability`. It starts as `'unavailable'` before media attachment. On iOS Safari, it reports `'unsupported'`.
 - This guide applies to media components that render a video element (`<video>`, `<hlsjs-video>`, `<dash-video>`, `<mux-video>`, and the like). Embed components (YouTube, Vimeo, TikTok, Twitch) forward autoplay to the third-party player, which applies its own autoplay rules; muted and inline behavior varies by provider.
 
 ## Common variations
 
 ### Background video
 
-Background video autoplays, loops, stays muted, and omits interactive controls. Use `<hls-background-video>` instead of configuring these behaviors yourself: it applies them by default and streams an HLS source, picking one rendition that fits the screen for the whole session.
+Use `<background-video>` for an MP4 or WebM file, `<hls-background-video>` for an HLS stream, or `<mux-background-video>` for a complete Mux HLS URL.
 
-Install the SPF adapter with the HTML façade:
-
-```bash
-pnpm add @videojs/html @videojs/spf
-```
-
-```html
-<hls-background-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></hls-background-video>
-<script type="module">
-  import '@videojs/html/media/hls-background-video';
-</script>
-```
-
-If you have a progressive MP4 or WebM file instead of an HLS stream, `<background-video>` is the same component without the streaming engine. See [`<background-video>`](../reference/components/background-video.md) for opt-out attributes and sizing.
+These components default to muted, looping playback without player controls. Provide a separate motion control and respect reduced-motion preferences. For setup and motion controls, follow [Add a background video](./background-video.md). That guide also covers streaming backgrounds, which always autoplay and need conditional mounting.
 
 ### Autoplay with sound
 
@@ -136,14 +123,15 @@ Call `play()` on the media element from a click handler:
 <button type="button" id="start">Play video</button>
 <script type="module">
   import '@videojs/html/video/player';
+  import '@videojs/html/ui/container';
 
   document.querySelector('#start').addEventListener('click', () => {
-    document.querySelector('video').play();
+    document.querySelector('video').play().catch(console.error);
   });
 </script>
 ```
 
-Because playback starts from a user gesture, the browser allows it unmuted.
+Calling `play()` directly from the click handler lets the browser authorize unmuted playback. The promise can still reject; these examples log the rejection and leave the button available to retry. For source and decoding failures, see [Handle playback errors](./playback-errors.md).
 
 ## Troubleshooting
 
@@ -164,7 +152,7 @@ Enable inline playback with the `playsinline` attribute on the media element.
 
 ### The video starts without sound
 
-Expected with muted autoplay. Let the user unmute through a [Mute button](../reference/components/mute-button.md) or [Volume slider](../reference/components/volume-slider.md) rather than unmuting programmatically; programmatic volume changes are unsupported on some platforms.
+Expected with muted autoplay. Give the user a [Mute button](../reference/components/mute-button.md) to unmute through an explicit action. Unmuting without a user action can cause the browser to pause or block playback. A [Volume slider](../reference/components/volume-slider.md) can also unmute where volume control is supported; it hides on platforms such as iOS Safari.
 
 ## Related pages
 
@@ -183,5 +171,6 @@ Expected with muted autoplay. Let the user unmute through a [Mute button](../ref
 
 ### Guides
 
+- [Add a decorative background video](./background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
 - [Features](./features.md): The state and actions each feature adds to the player
-- [Browser support](./browser-support.md): Browsers and rendering environments supported by Video.js 10, and what the stylesheets need from them
+- [Browser support](./browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them

package/docs/guides/background-video.md

@@ -17,11 +17,15 @@ Use [`<background-video>`](../reference/components/background-video.md) with an
     <background-video
       class="add-background-video-html-demo__media"
       src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"
+      noautoplay
     ></background-video>
   </div>
   <div class="add-background-video-html-demo__content">
     <h3>Build the next great video experience</h3>
     <a href="#common-variations">Compare source options</a>
+    <button type="button" class="add-background-video-html-demo__motion-toggle" data-motion-toggle>
+      Show background motion
+    </button>
   </div>
 </section>
 ```
@@ -87,22 +91,32 @@ Use [`<background-video>`](../reference/components/background-video.md) with an
   line-height: 1.1;
 }
 
-.add-background-video-html-demo__content a {
+.add-background-video-html-demo__content a,
+.add-background-video-html-demo__motion-toggle {
   width: fit-content;
   padding: 0.625rem 1rem;
   color: black;
   text-decoration: none;
+  font: inherit;
+  cursor: pointer;
+  border: 0;
   background: white;
   border-radius: 0.25rem;
 }
 
-.add-background-video-html-demo__content a:focus-visible {
+.add-background-video-html-demo__content a:focus-visible,
+.add-background-video-html-demo__motion-toggle:focus-visible {
   outline: 0.2rem solid white;
   outline-offset: 0.2rem;
 }
 
+.add-background-video-html-demo:not([data-motion-enabled]) .add-background-video-html-demo__media {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .add-background-video-html-demo__media {
+  .add-background-video-html-demo__media,
+  .add-background-video-html-demo__motion-toggle {
     display: none;
   }
 }
@@ -112,22 +126,71 @@ Use [`<background-video>`](../reference/components/background-video.md) with an
 
 ```ts
 import '@videojs/html/media/background-video';
+
+const initializedDemos = new WeakSet<HTMLElement>();
+
+function initializeDemos(): void {
+  document.querySelectorAll<HTMLElement>('.add-background-video-html-demo').forEach((hero) => {
+    if (initializedDemos.has(hero)) return;
+
+    initializedDemos.add(hero);
+
+    const video = hero.querySelector('background-video')!.target!;
+    const button = hero.querySelector<HTMLButtonElement>('[data-motion-toggle]')!;
+    const preference = window.matchMedia('(prefers-reduced-motion: reduce)');
+    let motionRequest = 0;
+
+    function setMotion(enabled: boolean) {
+      const request = ++motionRequest;
+
+      hero.toggleAttribute('data-motion-enabled', enabled);
+      button.textContent = enabled ? 'Hide background motion' : 'Show background motion';
+
+      if (enabled) {
+        video.play().catch(() => {
+          if (request === motionRequest) setMotion(false);
+        });
+      } else {
+        video.pause();
+      }
+    }
+
+    const syncPreference = () => setMotion(!preference.matches);
+
+    button.addEventListener('click', () => setMotion(!hero.hasAttribute('data-motion-enabled')));
+    preference.addEventListener('change', syncPreference);
+    document.addEventListener(
+      'astro:before-swap',
+      () => {
+        preference.removeEventListener('change', syncPreference);
+        setMotion(false);
+      },
+      { once: true }
+    );
+    syncPreference();
+  });
+}
+
+initializeDemos();
+document.addEventListener('astro:page-load', initializeDemos);
 ```
 
 ## How it works
 
-`<background-video>` renders the browser’s `<video>` element and starts it muted, looped, autoplaying, and inline. The example puts that video and an empty-alt poster in the `.hero-visual` wrapper. The wrapper is hidden from assistive technology and ignores pointer input, so it does not act like a media player.
+`<background-video>` renders a native `<video>` with muted, looping, inline playback. The example disables its default autoplay with `noautoplay` and starts playback after checking the motion preference. Its `target` property exposes the native video for `play()` and `pause()`. The decorative wrapper contains the video and an empty-alt poster; it is hidden from assistive technology and ignores pointer input.
+
+The page defines the hero’s size. The video fills that space with `--media-object-fit: cover`, while the poster stays behind it. The motion button pauses and hides the video, revealing the poster. It sits outside the decorative wrapper so keyboard and screen-reader users can operate it.
 
-The page defines the hero’s size. The video fills that space with `--media-object-fit: cover`, while the poster remains visible until the video paints a frame. The reduced-motion rule hides the video and leaves the poster in place.
+When `prefers-reduced-motion` is active, the script pauses playback and the CSS hides the video and motion button. CSS hiding alone does not stop playback. If the browser rejects `play()`, the example keeps the poster visible.
 
-Set the size, position, and transforms on the `.hero-visual` wrapper so the poster and video stay together.
+Set size, position, and transforms on the decorative wrapper so the poster and video stay together.
 
 ## Availability and constraints
 
 - Use a source the browser can play directly, such as MP4 or WebM.
 - Safari can play HLS URLs directly. Other browsers cannot do so reliably, so use an HLS variation below when the same `.m3u8` URL must work across browsers.
 - `<background-video>` does not create a poster or report analytics. Keep the poster in your page and add analytics only when you need them.
-- Video.js does not apply a reduced-motion policy for you. The example stops the decoration with `prefers-reduced-motion`.
+- Provide a way to pause or hide persistent background motion. The example includes that control and follows `prefers-reduced-motion`. For the streaming variations below, stop and restart motion by adding and removing the element.
 - If the video communicates information, remove `aria-hidden`, give it an accessible name and controls, and use a regular video player.
 
 ## Common variations
@@ -139,6 +202,10 @@ Choose a variation based on the source you already have:
 | Cross-browser HLS with a small background-only player | [`<hls-background-video>`](../reference/components/hls-background-video.md) |
 | The same background-only player for a Mux HLS URL | [`<mux-background-video>`](../reference/components/mux-background-video.md) |
 
+These streaming background components always autoplay. They ignore `autoPlay={false}` and `noautoplay`.
+
+Keep the poster and motion button from the primary example. Change `setMotion` to create and append a streaming element only when motion is enabled, and remove it when motion is disabled. Do not set `keep-alive`: removal must destroy playback. Create a new element each time motion is enabled; do not reuse the removed one. These elements expose the inner video as `video`, rather than the native background element’s `target`.
+
 ### Play an HLS video
 
 `<hls-background-video>` plays an HLS video without adding controls, audio, or captions. Pass a complete HLS URL through `src`: