Vidstack

https://vidstack.io/docs
Admin
A modern, open-source, and highly customizable media player for the web. It provides a robust...
Tokens:511,203
Snippets:6,222
Trust Score:8.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Remotion Player Setup

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

This snippet shows the basic setup for using the Remotion provider. Ensure you have Remotion installed and a component ready to be rendered.

```jsx
import { Player, Youtube } from '@vidstack/react';
import '@vidstack/react/player.css';
import { RemotionProvider } from '@vidstack/react/providers/remotion';

function MyPlayer() {
  return (
    <Player>
      <RemotionProvider src="./my-remotion-component.tsx" />
    </Player>
  );
}
```

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

### Basic CDN Installation

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

Include the Vidstack player script and stylesheet via CDN links in your HTML file. This is the simplest way to get started.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidstack/player@latest/dist/index.global.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vidstack/player@latest/dist/main.css">

<media-player>
  <media-video src="https://media.dev.vidstack.io/hls/content/bbb/apple-bma/playlist.m3u8"></media-video>
</media-player>
```

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

### Basic Controls Setup

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

Demonstrates the basic structure for setting up the Controls component with different control groups. This example uses default class names.

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

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

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

### Basic Gesture Setup

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

This example demonstrates how to set up the Gesture component with basic event-action mappings for toggling pause, controls, seeking, and fullscreen. It uses the default theme CSS classes.

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

<MediaPlayer>
  <MediaProvider />
  <Gesture className="media-gesture" event="pointerup" action="toggle:paused" />
  <Gesture className="media-gesture" event="pointerup" action="toggle:controls" />
  <Gesture className="media-gesture" event="dblpointerup" action="seek:-10" />
  <Gesture className="media-gesture" event="dblpointerup" action="seek:10" />
  <Gesture className="media-gesture" event="dblpointerup" action="toggle:fullscreen" />
</MediaPlayer>
```

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

### JSON Cues Example

Source: https://vidstack.io/docs/player/core-concepts/loading

Example format for JSON cues, specifying start time, end time, and the cue text.

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

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

### JSON Storyboard Example

Source: https://vidstack.io/docs/player/core-concepts/loading

Example of a JSON file defining a storyboard with image URL, tile dimensions, and tile start times/positions.

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

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

### Alternative Gesture Setup with VDS CSS

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

This example shows an alternative setup for the Gesture component using the 'vds-gesture' class for styling, mirroring the functionality of the first example but with different CSS class names.

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

<MediaPlayer>
  <MediaProvider />
  <Gesture className="vds-gesture" event="pointerup" action="toggle:paused" />
  <Gesture className="vds-gesture" event="pointerup" action="toggle:controls" />
  <Gesture className="vds-gesture" event="dblpointerup" action="seek:-10" />
  <Gesture className="vds-gesture" event="dblpointerup" action="seek:10" />
  <Gesture className="vds-gesture" event="dblpointerup" action="toggle:fullscreen" />
</MediaPlayer>
```

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

### Install React Player Packages

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

Install the necessary packages for the React Player. This is the first step in setting up the player.

```bash
npm install vidstack
# or
yarn add vidstack
```

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

### JSON VTT Cues Example

Source: https://vidstack.io/docs/player/core-concepts/loading

Example of a JSON file formatted as VTT cues, specifying start time, end time, and image text.

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

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

### Install Packages

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

Install the necessary packages for the React Player.

```bash
npm install vidstack
# or
yarn add vidstack
# or
pnpm add vidstack
```

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

### Install dash.js

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

Install the dash.js library if you are using the provider locally. This command installs dash.js using npm.

```bash
npm install dash.js
```

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

### Valid Source Examples

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

Examples of valid media source configurations, including those with file extensions or type hints.

```text
src="https://example.com/video.mp4"
src="https://example.com/hls.m3u8"
src="https://example.com/dash.mpd"
src = { src: "https://example.com/video", type: "video/mp4"  }
src = { src: "https://example.com/hls", type: "application/x-mpegurl"  }
src = { src: "https://example.com/dash", type: "application/dash+xml"  }
```

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

### Basic Tooltip Usage

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

Example of a basic media-tooltip structure, including trigger and content. The 'placement' prop is set to 'top start'.

```html
<media-tooltip>
  <media-tooltip-trigger>
    <media-play-button></media-play-button>
  </media-tooltip-trigger>
  <media-tooltip-content placement="top start">
     <span class="play-tooltip-text">Play</span>
     <span class="pause-tooltip-text">Pause</span>
  </media-tooltip-content>
</media-tooltip>
```

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

### Basic Media Player Setup with Provider

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

Illustrates a typical video player setup where the MediaProvider is placed within MediaPlayer and UI elements are overlaid.

```jsx
<MediaPlayer>
  {/* Can detach from DOM and move around to create floating, popup, and mini players. */}
  <MediaProvider>
    {/* Content here that should be rendered inside outlet (e.g., poster). */}
  </MediaProvider>

  {/* Controls and other media UI can be outside and placed on top. */}
</MediaPlayer>
```

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

### Install Vidstack Packages

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

Install the necessary Vidstack packages using npm or yarn.

```bash
npm install
yarn install
```

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

### Install Media Icons Package

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

Install the media-icons package using npm or yarn.

```bash
npm install media-icons
yarn add media-icons
```

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

### Media Provider Usage Example

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

A simple example demonstrating the basic usage of the MediaProvider component within a MediaPlayer.

```jsx
<MediaPlayer src="...">
  <MediaProvider />
</MediaPlayer>
```

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

### Install hls.js

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

Install the `hls.js` package if you are using the HLS provider locally and not via a CDN.

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

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

### Media Menu Button Usage Example

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

Shows a basic example of using the `<media-menu-button>` component within a `<media-menu>` structure.

```html
<media-menu>
  <media-menu-button aria-label="Settings">
    <media-icon type="settings"></media-icon>
  </media-menu-button>
  <media-menu-items>
    <!-- ... -->
  </media-menu-items>
</media-menu>
```

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

### Access Underlying HTMLVideoElement via Provider Setup

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

Listen for the 'provider-setup' event to get a reference to the video provider. If it's a video provider, you can access the underlying `HTMLVideoElement` via the `video` property.

```javascript
player.addEventListener('provider-setup', (event) => {
  const provider = event.detail;
  if (provider?.type === 'video') {
    const element = provider.video; // `HTMLVideoElement`
  }
});
```

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

### changeClipStart

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

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`

### Description
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.

### Method
Not specified (assumed to be a function call within a script context).

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

### Request Example
```javascript
remote.changeClipStart(100);
```
```

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

### Install Media Icons Package

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

Install the media-icons package using npm. Ensure you are using the next version.

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

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

### Basic Video Player Setup

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

Demonstrates how to set up a basic video player with a media source and provider.

```tsx
<MediaPlayer src="https://files.vidstack.io/sprite-fight/1080p.mp4">
  <MediaProvider />
</MediaPlayer>
```

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

### Basic Audio Player Setup

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

Demonstrates how to set up a basic audio player with a media source and provider.

```tsx
<MediaPlayer src="https://files.vidstack.io/sprite-fight/audio.mp3">
  <MediaProvider />
</MediaPlayer>
```

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

### Blob Video Player Setup

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

Demonstrates how to set up a video player using a Blob object as the media source.

```tsx
<MediaPlayer src={{ src: blob, type: 'video/object' }}>
  <MediaProvider />
</MediaPlayer>
```

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

### MediaPlayer Instance Setup

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

Demonstrates how to set up a MediaPlayer instance using a ref and access its methods and properties within a useEffect hook.

```javascript
import { MediaPlayer, type MediaPlayerInstance } from "@vidstack/react"

const ref = useRef<MediaPlayerInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<MediaPlayer ref={ref}>
```

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

### Get Slider Chapters Element Instance

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

Example of how to get a reference to the media-slider-chapters element in your JavaScript code to interact with its properties and methods.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-slider-chapters");
```

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

### JSON Images Array Example

Source: https://vidstack.io/docs/player/core-concepts/loading

Example of a JSON file containing an array of image objects, each with start time, end time, and URL.

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

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

### onProviderSetup

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

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.

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

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

### 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.

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

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

### Poster Component Basic Usage

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

Basic example of the Poster component within a MediaPlayer and MediaProvider setup.

```tsx
import { Poster, type PosterProps } from "@vidstack/react";

<MediaPlayer>
  <MediaProvider>
    <Poster src="..." alt="..." />
  </MediaProvider>
</MediaPlayer>
```

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

### Get Media Provider Element Reference

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

Example of obtaining a reference to the media provider DOM element to interact with its properties and methods.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-provider");
```

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

### onHlsLibLoadStart

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

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

```APIDOC
## onHlsLibLoadStart

### Description
Fired when the browser begins downloading the `hls.js` library.

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

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

### Basic Captions Integration

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

Integrate the Captions component into your media player setup. This example shows the basic usage with a MediaPlayer and MediaProvider.

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

<MediaPlayer className="media-player">
  <MediaProvider />
  <Captions className="vds-captions" />
</MediaPlayer>
```

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

### Get Slider Thumbnail Element Reference

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

Provides a basic example of how to obtain a direct reference to the MediaSliderThumbnailElement instance in the DOM using `document.querySelector`.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-slider-thumbnail");
```

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

### DASH Video Player Setup

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

Demonstrates how to set up a video player for DASH streaming.

```tsx
<MediaPlayer src="https://files.vidstack.io/sprite-fight/dash/stream.mpd">
  <MediaProvider />
</MediaPlayer>
```

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

### Get HTMLVideoElement from Provider Setup

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

Obtain a reference to the underlying `HTMLVideoElement` when the HLS provider is set up. This is useful for direct manipulation or inspection of the video element.

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

function onProviderSetup(provider: MediaProviderAdapter, nativeEvent: MediaProviderSetupEvent) {
  if (isHLSProvider(provider)) {
    const element = provider.video; // `HTMLVideoElement`
  }
}

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

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

### startLoading

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

Dispatches a `media-start-loading` event to initiate the media loading process. This is applicable only if the media player has a custom 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
```javascript
remote.startLoading(triggerEvent);
```
```

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

### MenuInstance Ref Usage

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

Example of using a `useRef` hook to get a reference to the `MenuInstance` of the `Menu.Root` component. This allows direct access to menu methods and properties.

```jsx
import { Menu, type MenuInstance } from "@vidstack/react"

const ref = useRef<MenuInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<Menu.Root ref={ref}>

```

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

### Vertical Slider Example

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

A vertical slider implementation using Vidstack React, utilizing CSS classes for styling. This snippet demonstrates the setup for a vertical orientation.

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

<Slider.Root className="media-slider" orientation="vertical">
  <Slider.Track className="media-slider-track">
    <Slider.TrackFill className="media-slider-track-fill media-slider-track" />
  </Slider.Track>
  <Slider.Thumb className="media-slider-thumb" />
</Slider.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
```typescript
(nativeEvent: DASHLibLoadStartEvent) => void
```
```

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

### Import All Player Elements via CDN

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

Register all custom media elements and import global TypeScript types by including this script tag. This is the recommended way to get started.

```html
<script type="module" src="https://cdn.vidstack.io/player/latest/vidstack-player.min.js"></script>
```

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

### Handle Start Media Loading

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

Fired when requesting media to begin loading. This is effective only if the `load` strategy is `custom`.

```typescript
function onMediaStartLoading(nativeEvent: MediaStartLoadingRequestEvent) => void
```

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

### Basic Time Slider with Chapters

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

This example shows a basic Time Slider setup with chapter support. It includes track, fill, progress, and thumb elements, along with chapter rendering.

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

<TimeSlider.Root className="vds-time-slider vds-slider">
  <TimeSlider.Chapters className="vds-slider-chapters">
    {(cues, forwardRef) =>
      cues.map((cue) => (
        <div className="vds-slider-chapter" key={cue.startTime} ref={forwardRef}>
          <TimeSlider.Track className="vds-slider-track">
            <TimeSlider.TrackFill className="vds-slider-track-fill vds-slider-track" />
            <TimeSlider.Progress className="vds-slider-progress vds-slider-track" />
          </TimeSlider.Track>
        </div>
      ))
    }
  </TimeSlider.Chapters>

  <TimeSlider.Preview className="vds-slider-preview">
    <TimeSlider.ChapterTitle className="vds-slider-chapter-title" />
    <TimeSlider.Value className="vds-slider-value" />
  </TimeSlider.Preview>

  <TimeSlider.Thumb className="vds-slider-thumb" />
</TimeSlider.Root>
```

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

### JavaScript Player Setup with PlyrLayout

Source: https://vidstack.io/docs/wc/player/components/layouts/plyr-layout?styling=default-theme

Set up the player programmatically using JavaScript, initializing the PlyrLayout with custom options like thumbnails.

```javascript
import { PlyrLayout, VidstackPlayer } from 'vidstack/global/player';

const player = await VidstackPlayer.create({
  target: '#target',
  title: 'Sprite Fight',
  src: 'https://files.vidstack.io/sprite-fight/720p.mp4',
  poster: 'https://files.vidstack.io/sprite-fight/poster.webp',
  layout: new PlyrLayout({
    thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt',
  }),
});
```

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

### Volume Slider React Component (vds-slider)

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

Example of integrating the Volume Slider component in React using the `vds-slider` class names for styling. This setup uses the default Vidstack styling.

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

<VolumeSlider.Root className="vds-slider">
  <VolumeSlider.Track className="vds-slider-track" />
  <VolumeSlider.TrackFill className="vds-slider-track-fill vds-slider-track" />

  <VolumeSlider.Preview className="vds-slider-preview" noClamp>
    <VolumeSlider.Value className="vds-slider-value" />
  </VolumeSlider.Preview>

  <VolumeSlider.Thumb className="vds-slider-thumb" />
</VolumeSlider.Root>
```

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

### Volume Slider React Component (media-slider)

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

Example of integrating the Volume Slider component in React using the `media-slider` class names for styling. This setup uses the default Vidstack styling.

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

<VolumeSlider.Root className="media-slider">
  <VolumeSlider.Track className="media-slider-track">
    <VolumeSlider.TrackFill className="media-slider-track-fill media-slider-track" />
  </VolumeSlider.Track>

  <VolumeSlider.Preview className="media-slider-preview" noClamp>
    <VolumeSlider.Value className="media-slider-value" />
  </VolumeSlider.Preview>

  <VolumeSlider.Thumb className="media-slider-thumb" />
</VolumeSlider.Root>
```

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

### onLoadStart

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

Fired when the browser has started to load a resource.

```APIDOC
## onLoadStart

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

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

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

### Speed Submenu Example

Source: https://vidstack.io/docs/player/components/menus/menu

Demonstrates how to create a custom submenu for controlling playback speed using the Menu and usePlaybackRateOptions hooks from Vidstack. Requires icon setup from the 'Icons' component page.

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

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

function SpeedSubmenu() {
  const options = usePlaybackRateOptions(),
    hint = options.selectedValue === '1' ? 'Normal' : options.selectedValue + 'x';
  return (
    <Menu.Root>
      <SubmenuButton label="Speed" hint={hint} disabled={options.disabled} icon={OdometerIcon} />
      <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>
  );
}
```

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

### Basic Media Player Structure with Provider

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

Illustrates how to structure a media player with the MediaProvider component and overlay UI elements.

```html
<media-player>
  <media-provider>
    <!-- Content here that should be rendered inside outlet (e.g., poster).
  </media-provider>

  <!-- Controls and other media UI can be outside and placed on top. -->
</media-player>
```

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

### Get Active Captions or Subtitles Track

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

This example shows how to retrieve the active text track when multiple kinds like 'captions' or 'subtitles' are supported. The hook will return the first active track found from the provided array.

```javascript
// Multiple track kinds are supported.
const activeCaptionsTrack = useActiveTextTrack(['captions', 'subtitles']);
```

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

### onHlsManifestLoading

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

Fired to signal that manifest loading is starting.

```APIDOC
## onHlsManifestLoading

### Description
Fired to signal that manifest loading is starting.

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

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

### Dispatch Media Control Events with useMediaRemote (React)

Source: https://vidstack.io/docs/player/core-concepts/state-management

This example shows how to use the `useMediaRemote` hook to get a `MediaRemoteControl` object. This object provides methods to dispatch media request events, such as play, pause, seek, and volume changes.

```javascript
import { type PointerEvent } from 'react';

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

function PlayerChildComponent() {
  const remote = useMediaRemote();

  function onClick({ nativeEvent }: PointerEvent) {
    // Attaching trigger here to trace this play call back to this event.
    remote.play(nativeEvent);
  }

  return <button onPointerUp={onClick}>{/* ... */}</button>;
}
```

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

### Basic Media Player Structure with Video Layout

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

Example of a basic media player structure including media provider and video layout.

```html
<media-player>
  <media-provider></media-provider>
  <media-video-layout></media-video-layout>
</media-player>
```

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

### HLS Video Player Setup

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

Demonstrates how to set up a video player for HLS streaming.

```tsx
<MediaPlayer src="https://files.vidstack.io/sprite-fight/hls/stream.m3u8">
  <MediaProvider />
</MediaPlayer>
```

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

### startLoading

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

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
```
```

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

### 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`.

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

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

### DASH Playback Started Event

Source: https://vidstack.io/docs/player/api/providers/dash?styling=css

Sent when playback of the media starts after having been paused.

```typescript
onDashPlaybackStarted(data: PlaybackStartedEvent, nativeEvent: DASHPlaybackStartedEvent) => void
```

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

### onMediaStartLoading

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

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`.

### Event
`onMediaStartLoading`

### Handler Signature
```javascript
(nativeEvent: MediaStartLoadingRequestEvent) => void
```
```

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

### Seek Button Examples (Forward/Backward)

Source: https://vidstack.io/docs/wc/player/components/buttons/seek-button?styling=default-theme

Demonstrates how to create seek buttons for both forward and backward seeking with custom durations.

```html
<!-- Forward +30s on each press. -->
<media-seek-button seconds="+30">
  <media-icon type="seek-forward"></media-icon>
</media-seek-button>
<!-- Backward -30s on each press. -->
<media-seek-button seconds="-30">
  <media-icon type="seek-backward"></media-icon>
</media-seek-button>
```

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

### Data Attribute Example

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

Example of styling the media-time component using the 'data-type' attribute.

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

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

### onMediaPosterStartLoading

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

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`.

### Event
`onMediaPosterStartLoading`

### Handler Signature
```javascript
(nativeEvent: MediaPosterStartLoadingRequestEvent) => void
```
```

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

### 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`.

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

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

### PlayButton onMediaPlayRequest Callback Example

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

Example defining the type for the `onMediaPlayRequest` callback, which receives a MediaPlayRequestEvent.

```javascript
(nativeEvent: MediaPlayRequestEvent) => void
```

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

### PlayButton onMediaPauseRequest Callback Example

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

Example defining the type for the `onMediaPauseRequest` callback, which receives a MediaPauseRequestEvent.

```javascript
(nativeEvent: MediaPauseRequestEvent) => void
```

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

### Get Time Slider Instance

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

Get a reference to the media-time-slider element to interact with its properties and methods.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-time-slider");
```

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

### Get Volume Slider Instance

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

Get a reference to the media-volume-slider element to interact with its props and methods.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-volume-slider");
```

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

### Basic HTML Usage

Source: https://vidstack.io/docs/wc/player/components/buttons/toggle-button?styling=default-theme

A minimal HTML example demonstrating the usage of the media-toggle-button custom element.

```html
<media-toggle-button aria-label="...">
  <!-- ... -->
</media-toggle-button>
```

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

### Get Element Instance

Source: https://vidstack.io/docs/wc/player/components/buttons/toggle-button?styling=default-theme

JavaScript snippet to get a reference to a media-toggle-button element for programmatic access.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-toggle-button");
```

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

### Remotion Video Player Setup

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

Demonstrates how to embed a Remotion video.

```tsx
<MediaPlayer src={{ src: RemotionVideo, type: 'video/remotion' }}>
  <MediaProvider />
</MediaPlayer>
```

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

### Change clip start time

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

Dispatch a `media-clip-start-change-request` event to update the start time for media playback.

```javascript
remote.changeClipStart(100); // start at 100 seconds
```

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

### onProviderSetup Event

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

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.

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

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

### Get Audio Gain Slider Instance

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

Get element reference to call props/methods on the media-audio-gain-slider component.

```javascript
// Get element reference to call props/methods.
const instance = document.querySelector("media-audio-gain-slider");
```
Tokens:
Raw