Vidstack Player

https://vidstack.io/docs/player
Admin
Vidstack Player is a framework and UI component library for building, customizing, and managing...
Tokens:402,943
Snippets:3,632
Trust Score:8.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### AudioGainSlider.Steps usage example

Source: https://vidstack.io/docs/player/components/sliders/audio-gain-slider

Example of using AudioGainSlider.Steps inside an AudioGainSlider.Root, rendering a div for each step.

```tsx
<AudioGainSlider.Root>
  <AudioGainSlider.Steps className="steps">
    {(step) => <div className="step" key={String(step)}></div>}
  </AudioGainSlider.Steps>
</AudioGainSlider.Root>
```

--------------------------------

### Install dashjs via npm

Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme

Install the dashjs library locally using npm.

```bash
npm i dashjs
```

--------------------------------

### Initialize Menu.Root

Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme

Basic setup for the Menu.Root component.

```typescript
import { Menu } from "@vidstack/react";

const Component = Menu.Root;
type Props = Menu.RootProps;
```

```jsx
<Menu.Root>
  <Menu.Button></Menu.Button>
  <Menu.Content placement="top end"></Menu.Content>
</Menu.Root>
```

--------------------------------

### Install via NPM or CDN

Source: https://vidstack.io/docs/player/getting-started/installation/javascript

Install Vidstack Player using your preferred method. The NPM command installs the package, while the CDN link loads it from a CDN. Choose one based on your setup.

```bash
npm install vidstack
```

```html
<script src="https://cdn.vidstack.io/player" crossorigin></script>
```

--------------------------------

### JSON Storyboard Example

Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css

Example structure for a JSON file defining a storyboard with tiles.

```json
{
  "url": "https://example.com/storyboard.jpg",
  "tileWidth": 256,
  "tileHeight": 160,
  "tiles": [
    { "startTime": 0, "x": 0, "y": 0 },
    { "startTime": 50, "x": 256, "y": 0 }
  ]
}
```

--------------------------------

### Install Required Packages

Source: https://vidstack.io/docs/player/getting-started/installation/react?provider=video&styling=plyr-layout

Install the necessary Vidstack player packages via terminal.

```bash
npm install @vidstack/react
```

--------------------------------

### onLoadStart

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Callback fired when the browser has started to load a resource.

```APIDOC
## onLoadStart

### Description
Fired when the browser has started to load a resource.

### Callback Signature
(nativeEvent: MediaLoadStartEvent) => void

### Parameters
- **nativeEvent** (MediaLoadStartEvent) - The native event object.

```

--------------------------------

### JSON VTT Example

Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css

Example structure for a JSON file containing VTT cues.

```json
[
  { "startTime": 0, "endTime": 5, "text": "/media/thumbnail-1.jpg" },
  { "startTime": 5, "endTime": 10, "text": "/media/thumbnail-2.jpg" }
]
```

--------------------------------

### changeVolume method examples

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Dispatches a `media-volume-change-request` event to set volume between 0 and 1, with examples for multiple levels including 0%, 5%, 50%, 70%, and 100%.

```javascript
remote.changeVolume(0); // 0%
remote.changeVolume(0.05); // 5%
remote.changeVolume(0.5); // 50%
remote.changeVolume(0.75); // 70%
remote.changeVolume(1); // 100%
```

--------------------------------

### Example JSON Track Configuration

Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css

An example of a JSON array defining track properties.

```json
[
  {
    "label": "English",
    "kind": "captions",
    "lang": "en-US",
    "type": "json",
    "content": { "regions": [], "cues": [] },
    "default": true
  },
  ...
]
```

--------------------------------

### changeClipStart(startTime)

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Dispatches a media-clip-start-change-request event to update the clip start time. This is the time at which media playback should start at.

```APIDOC
## changeClipStart(startTime)

### Description
Dispatch a `media-clip-start-change-request` event to update the clip start time. This is the time at which media playback should start at.

### Method
changeClipStart

### Parameters
- **startTime** (number) - Required - The new clip start time in seconds.

### Example
```js
remote.changeClipStart(100); // start at 100 seconds
```
```

--------------------------------

### Usage Example

Source: https://vidstack.io/docs/player/components/buttons/pip-button

Example of using the PIPButton component with media state to toggle between enter and exit icons.

```jsx
const isActive = useMediaState('pictureInPicture');

<PIPButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</PIPButton>
```

--------------------------------

### Install media-icons package

Source: https://vidstack.io/docs/player/components/display/icons

Install the media-icons package using npm. The package is currently in a next version.

```bash
npm i media-icons@next
```

--------------------------------

### Install hls.js via npm

Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme

Install the hls.js package locally using npm.

```bash
npm i hls.js
```

--------------------------------

### Default Theme Controls Example (vds-classes)

Source: https://vidstack.io/docs/player/components/display/controls

Same as the default theme example but using vds-controls class names.

```tsx
import { Controls } from '@vidstack/react';

<MediaPlayer>
  <MediaProvider />
  <Controls.Root className="vds-controls">
    <Controls.Group className="vds-controls-group">Top Controls Group</Controls.Group>
    <div className="vds-controls-spacer" />
    <Controls.Group className="vds-controls-group">Center Controls Group</Controls.Group>
    <div className="vds-controls-spacer" />
    <Controls.Group className="vds-controls-group">Bottom Controls Group</Controls.Group>
  </Controls.Root>
</MediaPlayer>
```

--------------------------------

### onHlsManifestLoading

Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme

Fired to signal that manifest loading is starting.

```typescript
(data: ManifestLoadingData, nativeEvent: HLSManifestLoadingEvent) => void
```

--------------------------------

### onLoadStart callback

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Fired when the browser has started to load a resource.

```typescript
(nativeEvent: MediaLoadStartEvent) => void
```

--------------------------------

### onHlsAudioTrackLoading

Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme

Fired when loading an audio track starts.

```APIDOC
## onHlsAudioTrackLoading

### Description
Fired when loading an audio track starts.

### Callback Signature
(data: TrackLoadingData, nativeEvent: HLSAudioTrackLoadingEvent) => void
```

--------------------------------

### onHlsLevelLoading

Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme

Callback fired when a level playlist loading starts.

```APIDOC
## onHlsLevelLoading

### Description
Fired when a level playlist loading starts.

### Callback Signature
(data: LevelLoadingData, nativeEvent: HLSLevelLoadingEvent) => void

### Parameters
- **data** (LevelLoadingData) - Required - Event data.
- **nativeEvent** (HLSLevelLoadingEvent) - Required - Native hls.js event object.
```

--------------------------------

### Use Media Icons

Source: https://vidstack.io/docs/player/getting-started/installation/react?provider=video&styling=plyr-layout

Example of rendering a media icon component.

```jsx
<PlayIcon size={40} />
```

--------------------------------

### onProviderSetup

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Callback fired immediately after the provider has been set up. Receives an adapter and the native event.

```APIDOC
## onProviderSetup

### Description
Fired immediately after the provider has been set up. Do not try and configure the provider here as it'll be too late - prefer the `provider-change` event.

### Signature
(adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void

### Parameters
- **adapter** (MediaProviderAdapter) - The provider adapter.
- **nativeEvent** (MediaProviderSetupEvent) - The native event object.
```

--------------------------------

### Getting player instance with useMediaPlayer

Source: https://vidstack.io/docs/player/core-concepts/state-management?styling=css

Shows how to get a player instance reference with useMediaPlayer inside a player child component, and then subscribe to state updates similarly to the previous example.

```tsx
import { useEffect } from 'react';

import { useMediaPlayer } from '@vidstack/react';

// This component is a child of `<MediaPlayer>`
function PlayerChildComponent() {
  const player = useMediaPlayer();

  useEffect(() => {
    if (!player) return;
    // Same as example above here.
  }, [player]);
}

```

--------------------------------

### onProviderSetup

Source: https://vidstack.io/docs/player/components/core/player

Fired immediately after the provider has been set up. Do not try and configure the provider here as it'll be too late - prefer the provider-change event.

```APIDOC
## onProviderSetup

### Description
Fired immediately after the provider has been set up. Do not try and configure the provider here as it'll be too late - prefer the provider-change event.

### Callback Signature
(adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void

### Parameters
- **adapter** (MediaProviderAdapter) - Required - The provider adapter that was set up.
- **nativeEvent** (MediaProviderSetupEvent) - Required - The native event object.
```

--------------------------------

### useVideoQualityOptions hook example

Source: https://vidstack.io/docs/player/api/hooks/use-video-quality-options?styling=default-theme

Use this hook to get video quality options and render a quality submenu. The example shows how to display the current quality as a hint, handle auto option, and map options to menu radio items.

```tsx
import { Menu, useVideoQualityOptions } from '@vidstack/react';

function VideoQualitySubmenu() {
  const options = useVideoQualityOptions({ auto: true, sort: 'descending' }),
    currentQualityHeight = options.selectedQuality?.height,
    hint =
      options.selectedValue !== 'auto' && currentQualityHeight
        ? `${currentQualityHeight}p`
        : `Auto${currentQualityHeight ? ` (${currentQualityHeight}p)` : ''}`;
  return (
    <Menu.Root>
      <Menu.Button disabled={options.disabled}>Quality ({hint})</Menu.Button>
      <Menu.Content>
        <Menu.RadioGroup value={options.selectedValue}>
          {options.map(({ quality, label, value, bitrateText, select }) => (
            <Menu.Radio value={value} onSelect={select} key={value}>
              {label}
            </Menu.Radio>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}
```

--------------------------------

### startLoading method

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Dispatch a media-start-loading event to start the media loading process. Only works if the player has a custom media loading strategy.

```javascript
remote.startLoading(triggerEvent);
```

--------------------------------

### useTextCues with useActiveTextTrack

Source: https://vidstack.io/docs/player/api/hooks/use-text-cues?styling=css

Use this hook to observe cues on a text track. The example gets the active 'chapters' track and returns VTTCue[] objects.

```typescript
import { useActiveTextTrack, useTextCues } from '@vidstack/react';

const track = useActiveTextTrack('chapters'),
  // Returns `VTTCue[]` objects.
  cues = useTextCues(track);
```

--------------------------------

### Access hls.js instance

Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme

Get a reference to the hls.js instance in the provider setup event. Use provider.instance to access the instance and provider.ctor for the constructor.

```tsx
import {
  isHLSProvider,
  type MediaProviderAdapter,
  type MediaProviderSetupEvent,
} from '@vidstack/react';

function onProviderSetup(provider: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) {
  if (isHLSProvider(provider)) {
    provider.ctor; // `hls.js` constructor
    provider.instance; // `hls.js` instance
  }
}

<MediaPlayer onProviderSetup={onProviderSetup} />
```

--------------------------------

### startLoading

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Dispatches a media-start-loading event to start the media loading process. This will only work if the media player has been initialized with a custom media loading strategy.

```APIDOC
## startLoading

### Description
Dispatch a `media-start-loading` event to start the media loading process. This will only work if the media player has been initialized with a custom media loading strategy.

### Method
startLoading

### Parameters
- **triggerEvent** (Event) - Optional - The event that triggered the loading request.

### Example
```
remote.startLoading(triggerEvent);
```
```

--------------------------------

### useAudioGainOptions hook example

Source: https://vidstack.io/docs/player/api/hooks/use-audio-gain-options?styling=default-theme

Use this hook to get audio gain options and render them in a menu. The options object provides a disabled flag, a selectedValue, and an array of options with label, value, and select function. The example shows a submenu with a radio group for selecting an audio boost level.

```tsx
import { Menu, useAudioGainOptions } from '@vidstack/react';

function AudioGainSubmenu() {
  const options = useAudioGainOptions();
  return (
    <Menu.Root>
      <Menu.Button disabled={options.disabled}>Audio Boost</Menu.Button>
      <Menu.Content>
        <Menu.RadioGroup value={options.selectedValue}>
          {options.map(({ label, value, select }) => (
            <Menu.Radio value={value} onSelect={select} key={value}>
              {label}
            </Menu.Radio>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}
```

--------------------------------

### Implement Captions Submenu in React

Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme

This example demonstrates how to create a captions submenu using Menu.Root, Menu.Content, and Menu.RadioGroup. It utilizes the useCaptionOptions hook to manage track selection and requires the Icons component setup.

```tsx
import { type ReactElement } from 'react';

import { Menu, useCaptionOptions } from '@vidstack/react';
// See "Icons" component page for setup before importing the following:
import {
  CheckIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ClosedCaptionsIcon,
} from '@vidstack/react/icons';

function CaptionsSubmenu() {
  const options = useCaptionOptions(),
    hint = options.selectedTrack?.label ?? 'Off';
  return (
    <Menu.Root>
      <SubmenuButton
        label="Captions"
        hint={hint}
        disabled={options.disabled}
        icon={ClosedCaptionsIcon}
      />
      <Menu.Content className="media-submenu">
        <Menu.RadioGroup className="media-radio-group" value={options.selectedValue}>
          {options.map(({ label, value, select }) => (
            <Menu.Radio className="media-radio" value={value} onSelect={select} key={value}>
              <CheckIcon className="media-radio-icon" />
              <span className="media-radio-label">{label}</span>
            </Menu.Radio>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}

interface SubmenuButtonProps {
  label: string;
  hint: string;
  disabled?: boolean;
  icon: ReactElement;
}

function SubmenuButton({ label, hint, icon: Icon, disabled }: SubmenuButtonProps) {
  return (
    <Menu.Button className="media-submenu-button" disabled={disabled}>
      <ChevronLeftIcon className="media-submenu-close-icon" />
      <Icon className="media-submenu-icon" />
      <span className="media-submenu-label">{label}</span>
      <span className="media-submenu-hint">{hint}</span>
      <ChevronRightIcon className="media-submenu-open-icon" />
    </Menu.Button>
  );
}
```

--------------------------------

### startLoadingPoster method

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Dispatch a media-start-loading-poster event to start the poster image loading process. Only works if the player has a custom poster loading strategy.

```javascript
remote.startLoadingPoster(triggerEvent);
```

--------------------------------

### useAudioOptions hook usage in React

Source: https://vidstack.io/docs/player/api/hooks/use-audio-options?styling=default-theme

Use this hook to get the current audio track options. The example builds an audio submenu with a radio group, disabling the button when no options are available and showing the selected track label as a hint.

```tsx
import { Menu, useAudioOptions } from '@vidstack/react';

function AudioSubmenu() {
  const options = useAudioOptions(),
    hint = options.selectedTrack?.label;
  return (
    <Menu.Root>
      <Menu.Button disabled={options.disabled}>Audio ({hint})</Menu.Button>
      <Menu.Content>
        <Menu.RadioGroup value={options.selectedValue}>
          {options.map(({ label, value, select }) => (
            <Menu.Radio value={value} onSelect={select} key={value}>
              {label}
            </Menu.Radio>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}
```

--------------------------------

### onMediaStartLoading

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Callback fired when requesting media to begin loading. This will only take effect if the load strategy on the player is set to custom.

```APIDOC
## onMediaStartLoading

### Description
Fired when requesting media to begin loading. This will only take effect if the load strategy on the player is set to custom.

### Callback Signature
(nativeEvent: MediaStartLoadingRequestEvent) => void

### Parameters
- **nativeEvent** (MediaStartLoadingRequestEvent) - Required - The native event object.

```

--------------------------------

### onMediaPosterStartLoading

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Callback fired when requesting the media poster to begin loading. This will only take effect if the posterLoad strategy on the player is set to custom.

```APIDOC
## onMediaPosterStartLoading

### Description
Fired when requesting the media poster to begin loading. This will only take effect if the posterLoad strategy on the player is set to custom.

### Callback Signature
(nativeEvent: MediaPosterStartLoadingRequestEvent) => void

### Parameters
- **nativeEvent** (MediaPosterStartLoadingRequestEvent) - Required - The native event object.

```

--------------------------------

### TimeSlider.ChapterTitle usage example

Source: https://vidstack.io/docs/player/components/sliders/time-slider?styling=default-theme

Example of using TimeSlider.ChapterTitle inside a TimeSlider.Preview.

```tsx
<TimeSlider.Root>
  <TimeSlider.Preview>
    <TimeSlider.Chapter />
  </TimeSlider.Preview>
</TimeSlider.Root>
```

--------------------------------

### startLoading

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Called when media can begin loading. Calling this method will trigger the initial provider loading process. Calling it more than once has no effect.

```APIDOC
## startLoading

### Description
Called when media can begin loading. Calling this method will trigger the initial provider loading process. Calling it more than once has no effect.

### Method
method

### Signature
(trigger?: Event) => void

### Parameters
- **trigger** (Event) - Optional - The event that triggered the call.

### Returns
void
```

--------------------------------

### onMediaStartLoading

Source: https://vidstack.io/docs/player/components/core/player

Fired when requesting media to begin loading. This will only take effect if the `load` strategy on the player is set to `custom`.

```APIDOC
## onMediaStartLoading

### Description
Fired when requesting media to begin loading. This will only take effect if the `load` strategy on the player is set to `custom`.

### Callback Signature
```
(nativeEvent: MediaStartLoadingRequestEvent) => void
```

### Parameters
- **nativeEvent** (MediaStartLoadingRequestEvent) - Required - The native event object.
```

--------------------------------

### onMediaPosterStartLoading

Source: https://vidstack.io/docs/player/components/core/player

Fired when requesting the media poster to begin loading. This will only take effect if the `posterLoad` strategy on the player is set to `custom`.

```APIDOC
## onMediaPosterStartLoading

### Description
Fired when requesting the media poster to begin loading. This will only take effect if the `posterLoad` strategy on the player is set to `custom`.

### Callback Signature
```
(nativeEvent: MediaPosterStartLoadingRequestEvent) => void
```

### Parameters
- **nativeEvent** (MediaPosterStartLoadingRequestEvent) - Required - The native event object.
```

--------------------------------

### onHlsLibLoadStart

Source: https://vidstack.io/docs/player/api/providers/hls?styling=default-theme

Fired when the browser begins downloading the hls.js library.

```typescript
(nativeEvent: HLSLibLoadStartEvent) => void
```

--------------------------------

### AudioGainSlider.Thumb component setup

Source: https://vidstack.io/docs/player/components/sliders/audio-gain-slider?styling=default-theme

Importing and defining the Thumb component and its props.

```typescript
import { AudioGainSlider } from "@vidstack/react";

const Component = AudioGainSlider.Thumb;
type Props = AudioGainSlider.ThumbProps;
```

```jsx
<AudioGainSlider.Root>
  <AudioGainSlider.Thumb />
</AudioGainSlider.Root>
```

--------------------------------

### JSON Images Example

Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css

Example structure for a JSON file containing an array of image objects.

```json
[
  { "startTime": 0, "endTime": 5, "url": "/media/thumbnail-1.jpg" },
  { "startTime": 5, "endTime": 10, "url": "/media/thumbnail-2.jpg" }
]
```

--------------------------------

### React Menu with media- classes (example.tsx)

Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme

React JSX example using Menu.Root, Menu.Button, and Menu.Items with media- prefixed classes. Requires importing Menu from '@vidstack/react' and SettingsIcon from '@vidstack/react/icons'.

```tsx
import { Menu } from '@vidstack/react';
// See "Icons" component page for setup before importing the following:
import { SettingsIcon } from '@vidstack/react/icons';

<Menu.Root>
  <Menu.Button className="media-button" aria-label="Settings">
    <SettingsIcon className="media-rotate-icon" />
  </Menu.Button>
  <Menu.Items className="media-menu" placement="top" offset={0}>
    {/* Menu Items + Submenus */}
  </Menu.Items>
</Menu.Root>
```

--------------------------------

### onDashLibLoadStart

Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme

Fired when the browser begins downloading the dash.js library.

```APIDOC
## onDashLibLoadStart

### Description
Fired when the browser begins downloading the dash.js library.

### Signature
(nativeEvent: DASHLibLoadStartEvent) => void

```

--------------------------------

### Slider.Steps Usage Example

Source: https://vidstack.io/docs/player/components/sliders/slider?styling=default-theme

Example of implementing Slider.Steps within a Slider.Root component using a render function.

```jsx
<Slider.Root>
  <Slider.Steps className="steps">
    {(step) => <div className="step" key={String(step)}></div>}
  </Slider.Steps>
</Slider.Root>
```

--------------------------------

### Example JSON Cues

Source: https://vidstack.io/docs/player/core-concepts/loading?styling=css

A simple JSON file structure for defining media cues.

```json
[
  { "startTime": 0, "endTime": 5, "text": "Cue One!" },
  { "startTime": 5, "endTime": 10, "text": "Cue Two!" }
]
```

--------------------------------

### Example CSS for media-chapter-title

Source: https://vidstack.io/docs/player/components/display/chapter-title

Example CSS for styling the chapter title with a bullet separator and ellipsis overflow.

```css
.media-chapter-title {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  font-family: sans-serif;
  color: rgba(255 255 255 / 0.64);
  flex: 1 1 0%;
  padding-inline: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media-chapter-title::before {
  content: '\2022';
  display: inline-block;
  margin-right: 6px;
  color: rgba(255 255 255 / 0.64);
}

.media-chapter-title:empty::before {
  content: '';
  margin-left: 0;
}
```

--------------------------------

### onProviderSetup callback

Source: https://vidstack.io/docs/player/components/core/player?styling=css

Fired immediately after the provider has been set up.

```typescript
(adapter: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) => void
```

--------------------------------

### Access dashjs Instance

Source: https://vidstack.io/docs/player/api/providers/dash?styling=default-theme

Obtain a reference to the dashjs instance via the provider setup event.

```APIDOC
## Access dashjs Instance

### Description
Obtain a reference to the dashjs instance via the provider setup event.

### Usage
```tsx
import {
  isDASHProvider,
  type MediaProviderAdapter,
  type MediaProviderSetupEvent,
} from '@vidstack/react';

function onProviderSetup(provider: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) {
  if (isDASHProvider(provider)) {
    provider.ctor; // `dashjs` constructor
    provider.instance; // `dashjs` instance
  }
}

<MediaPlayer onProviderSetup={onProviderSetup} />
```

```

--------------------------------

### Data attribute CSS example

Source: https://vidstack.io/docs/player/components/buttons/caption-button

Example CSS selector for styling the component using data attributes.

```css
/* Example. */
.component[data-foo] {}
```

--------------------------------

### Install Vidstack Packages (Terminal)

Source: https://vidstack.io/docs/player/getting-started/installation/react?provider=video&styling=default-layout

Run this command in your terminal to install the required Vidstack packages for React.

```terminal
```
    
```
```

--------------------------------

### startLoadingPoster

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Dispatches a media-start-loading-poster event to start the poster image loading process. This will only work if the media player has been initialized with a custom poster loading strategy.

```APIDOC
## startLoadingPoster

### Description
Dispatch a `media-start-loading-poster` event to start the poster image loading process. This will only work if the media player has been initialized with a custom poster loading strategy.

### Method
startLoadingPoster

### Parameters
- **triggerEvent** (Event) - Optional - The event that triggered the loading request.

### Example
```
remote.startLoadingPoster(triggerEvent);
```
```

--------------------------------

### Tracking media state via hooks

Source: https://vidstack.io/docs/player/core-concepts/state-management?styling=css

Shows two hook-based approaches: useMediaState for a single piece of state (cheaper/faster) and useMediaStore for a live subscription to all media state. Both require a ref to the player instance.

```tsx
import { useRef } from 'react';

import {
  MediaPlayer,
  useMediaState,
  useMediaStore,
  type MediaPlayerInstance,
} from '@vidstack/react';

function Player() {
  const player = useRef<MediaPlayerInstance>(null);

  // ~~ Option 1
  // - This hook is simpler when accessing a single piece of state.
  // - This hook is much cheaper/faster than `useMediaStore`.
  const paused = useMediaState('paused', player);

  // ~~ Option 2
  // - This hook creates a live subscription to the media paused state.
  // - All state subscriptions are lazily created on prop access.
  // - This hook makes it easy to access all media state.
  const { paused } = useMediaStore(player);

  return <MediaPlayer ref={player}>{/* ... */}</MediaPlayer>;
}

```

--------------------------------

### TimeSlider.Chapters usage example

Source: https://vidstack.io/docs/player/components/sliders/time-slider?styling=default-theme

Example of using TimeSlider.Chapters to render chapter cues with track, track fill, and progress.

```tsx
<TimeSlider.Root>
  <TimeSlider.Chapters>
    {(cues, forwardRef) =>
      cues.map((cue) => (
        <div key={cue.startTime} ref={forwardRef}>
          <TimeSlider.Track>
            <TimeSlider.TrackFill />
            <TimeSlider.Progress />
          </TimeSlider.Track>
       </div>
    ))}
  </TimeSlider.Chapters>
</TimeSlider.Root>
```

--------------------------------

### Create VS Code settings file

Source: https://vidstack.io/docs/player/getting-started/installation/angular

Run this command in your project root to create the .vscode/settings.json file.

```bash
touch .vscode/settings.json
```

--------------------------------

### Import useMediaRemote and get MediaRemoteControl instance

Source: https://vidstack.io/docs/player/api/classes/media-remote-control?styling=default-theme

Import the useMediaRemote hook from @vidstack/react and call it to get a MediaRemoteControl instance.

```javascript
import { useMediaRemote } from '@vidstack/react';

// Returns a `MediaRemoteControl` class instance.
const remote = useMediaRemote();
```

--------------------------------

### onMediaClipStartChangeRequest

Source: https://vidstack.io/docs/player/components/core/player?styling=default-theme

Fired when requesting to change the clip start time. The event `detail` specifies the new start time in seconds.

```APIDOC
## onMediaClipStartChangeRequest

### Description
Fired when requesting to change the clip start time. The event `detail` specifies the new start time in seconds.

### Callback Signature
(detail: number, nativeEvent: MediaClipStartChangeRequestEvent) => void

### Parameters
- **detail** (number) - The new clip start time in seconds.
- **nativeEvent** (MediaClipStartChangeRequestEvent) - The native media event.
```

--------------------------------

### Menu Portal Component Setup

Source: https://vidstack.io/docs/player/components/menus/menu?styling=default-theme

Importing and defining the Menu.Portal component and its props.

```typescript
import { Menu } from "@vidstack/react";

const Component = Menu.Portal;
type Props = Menu.PortalProps;
```

--------------------------------

### Tailwind CSS media variant example

Source: https://vidstack.io/docs/player/styling/tailwind?styling=default-theme

Use the media-paused variant to apply styles when playback is paused. The example shows a div that becomes transparent when the media is paused.

```jsx
<div className="media-paused:opacity-0" />
```
Tokens:
Raw