### Complete Utility Setup Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Demonstrates usage of time formatting, capability checks, and file download utilities in a player context.

```typescript
import {
  formatTime,
  formatSpokenTime,
  canPlayHLSNatively,
  canUsePictureInPicture,
  getDownloadFile,
} from 'vidstack';

// Format display time
const displayTime = formatTime(125);      // "2:05"
const speakTime = formatSpokenTime(125); // "2 minutes, 5 seconds"

// Check device capabilities
const supportsNativeHLS = canPlayHLSNatively();
const supportsPiP = canUsePictureInPicture();

// Setup player based on capabilities
const player = new MediaPlayer({
  preferNativeHLS: supportsNativeHLS,
  src: 'video.mp4',
});

// Download feature
const downloadBtn = document.querySelector('.download-btn');
downloadBtn?.addEventListener('click', () => {
  const { url, filename } = getDownloadFile('https://example.com/video.mp4');
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
});
```

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

### Track Configuration Examples

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Tracks.md

Examples of configuring track elements with different formats.

```html
<track src="subtitles.vtt" kind="subtitles" type="text/vtt" />
<track src="subtitles.srt" kind="subtitles" data-type="srt" />
<track src="subtitles.ass" kind="subtitles" data-type="ass" />
```

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

### WebVTT File Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Tracks.md

A basic example of the WebVTT file format structure.

```text
WEBVTT

00:00:00.500 --> 00:00:07.000
Caption text appears here

00:00:08.000 --> 00:00:12.000
Next caption here
```

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

### Play Media Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Initiate playback on the media player instance.

```typescript
const player = document.querySelector('media-player');
await player.remoteControl.play();
```

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

### play()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Starts media playback.

```APIDOC
### play()

#### Description
Start media playback.

#### Signature
`play(): Promise<void>`

#### Returns
Promise that resolves when playback starts or rejects on error.
```

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

### Implement FullscreenButton in HTML

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of the FullscreenButton component.

```html
<fullscreen-button></fullscreen-button>
```

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

### Initialize MediaPlayer

Source: https://github.com/vidstack/player/blob/main/_autodocs/INDEX.md

Basic setup for a new player instance with source and controls.

```typescript
const player = new MediaPlayer({
  src: 'video.mp4',
  title: 'My Video',
  controls: true,
});
```

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

### play()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Starts media playback. Returns a promise that resolves when playback begins.

```APIDOC
## play(request?: MediaPlayRequest | Event)

### Description
Starts media playback. Returns a promise that resolves when playback starts.

### Parameters
- **request** (MediaPlayRequest | Event) - Optional - Originating event for event chaining.

### Returns
- **Promise<void>** - Resolves when playback starts.

### Throws
- **Error** - If playback cannot start (e.g., no source).
```

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

### Implement CustomStorage

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Example implementation of the MediaStorage interface using browser localStorage.

```typescript
class CustomStorage implements MediaStorage {
  setItem(key: string, value: string) {
    localStorage.setItem(key, value);
  }
  
  getItem(key: string) {
    return localStorage.getItem(key);
  }
}

const player = new MediaPlayer({
  storage: new CustomStorage(),
});
```

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

### Complete Media Control Setup

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Demonstrates basic playback control implementation including play, pause, seeking, volume, playback rate, and fullscreen toggling.

```typescript
const player = document.querySelector('media-player');
const { remote } = player.remoteControl;

// Play
document.getElementById('play-btn').addEventListener('click', () => {
  remote.play();
});

// Pause
document.getElementById('pause-btn').addEventListener('click', () => {
  remote.pause();
});

// Seek to 30 seconds
document.getElementById('seek-30').addEventListener('click', () => {
  remote.seek(30);
});

// Set volume to 80%
document.getElementById('volume-80').addEventListener('click', () => {
  remote.setVolume(0.8);
});

// Set 1.5x speed
document.getElementById('speed-15x').addEventListener('click', () => {
  remote.setPlaybackRate(1.5);
});

// Toggle fullscreen
document.getElementById('fullscreen').addEventListener('click', async () => {
  await remote.toggleFullscreen();
});
```

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

### Audio Track Source Examples

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Tracks.md

Examples of how audio tracks are defined in HLS and DASH manifests.

```text
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="en",LABEL="English"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",LANGUAGE="es",LABEL="Español"
```

```xml
<AdaptationSet mimeType="audio/mp4" lang="en">...</AdaptationSet>
<AdaptationSet mimeType="audio/mp4" lang="es">...</AdaptationSet>
```

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

### Load Method Usage

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaProvider.md

Example of initializing a provider by loading a video element into the media-provider component.

```typescript
const provider = document.querySelector('media-provider');
const videoElement = document.createElement('video');
provider.load(videoElement);
```

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

### Initialize Basic MediaPlayer

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Basic setup for a standard media player instance with source, poster, and initial playback settings.

```typescript
import { MediaPlayer } from 'vidstack';

const player = new MediaPlayer({
  src: 'https://example.com/video.mp4',
  title: 'My Video',
  poster: 'https://example.com/poster.jpg',
  paused: true,
  volume: 0.8,
  controls: true,
});
```

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

### Implement Tooltip Component

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of a tooltip wrapping a trigger and content.

```html
<tooltip>
  <tooltip-trigger>
    <play-button></play-button>
  </tooltip-trigger>
  <tooltip-content>Play (k)</tooltip-content>
</tooltip>
```

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

### Construct Media Player Layout

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Full example of a media player structure including provider, controls, and buttons.

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

  <controls>
    <div class="controls-container">
      <controls-group>
        <play-button></play-button>
        <time-slider></time-slider>
      </controls-group>

      <controls-group>
        <time type="current"></time> / <time type="duration"></time>
        <caption-button></caption-button>
        <mute-button></mute-button>
        <volume-slider></volume-slider>
        <fullscreen-button></fullscreen-button>
      </controls-group>
    </div>

    <captions></captions>
  </controls>
</media-player>
```

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

### Handle Media State Updates

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Examples for tracking time, duration, and buffering changes.

```typescript
player.addEventListener('time-update', () => {
  const time = player.$state.currentTime();
  console.log(`Current time: ${time}s`);
});
```

```typescript
player.addEventListener('duration-change', () => {
  const duration = player.$state.duration();
  console.log(`Duration: ${duration}s`);
});
```

```typescript
player.addEventListener('buffered-change', () => {
  const buffered = player.$state.buffered();
  console.log(`Buffered to ${buffered.end(0)}s`);
});
```

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

### Setup Complete Event Handling

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Organizes event listeners and reactive state effects for comprehensive player monitoring.

```typescript
function setupEventHandling(player) {
  // Playback
  player.on('play', handlePlay);
  player.on('pause', handlePause);
  player.on('ended', handleEnded);
  
  // Buffering
  player.on('waiting', handleBuffering);
  player.on('playing', handleBufferingResolved);
  
  // Seeking
  player.on('seeking', handleSeeking);
  player.on('seeked', handleSeeked);
  
  // Errors
  player.on('error', handleError);
  
  // State changes (better with effects)
  effect(() => {
    const state = {
      paused: player.$state.paused(),
      currentTime: player.$state.currentTime(),
      duration: player.$state.duration(),
      volume: player.$state.volume(),
    };
    updateUI(state);
  });
}

function handlePlay() { /* ... */ }
function handlePause() { /* ... */ }
function handleEnded() { /* ... */ }
function handleBuffering() { /* ... */ }
function handleBufferingResolved() { /* ... */ }
function handleSeeking() { /* ... */ }
function handleSeeked() { /* ... */ }
function handleError(e) { /* ... */ }
function updateUI(state) { /* ... */ }
```

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

### Pause Media Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Halt playback on the media player instance.

```typescript
await player.remoteControl.pause();
```

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

### Get Time Range Start

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Retrieves the start time of the first range, useful for determining VOD or live stream start points.

```typescript
import { getTimeRangesStart } from 'vidstack';

const seekable = player.$state.seekable();
const startTime = getTimeRangesStart(seekable); // 0 for VOD, live start for live
```

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

### Implement CaptionButton in HTML

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of the CaptionButton component.

```html
<caption-button></caption-button>
```

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

### Toggle Media Playback Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Switch the current playback state of the media player.

```typescript
await player.remoteControl.togglePaused();
```

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

### Configure Media Sources

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaProvider.md

Examples of defining media sources for different formats and quality variants.

```typescript
// HTML5 video
{ src: 'video.mp4', type: 'video/mp4' }

// HLS stream
{ src: 'stream.m3u8', type: 'application/x-mpegURL' }

// DASH stream
{ src: 'stream.mpd', type: 'application/dash+xml' }

// YouTube
{ src: 'https://youtube.com/watch?v=VIDEO_ID' }

// Vimeo
{ src: 'https://vimeo.com/VIDEO_ID' }

// Quality variants
[
  { src: 'video-360p.mp4', type: 'video/mp4', height: 360 },
  { src: 'video-720p.mp4', type: 'video/mp4', height: 720 },
  { src: 'video-1080p.mp4', type: 'video/mp4', height: 1080 },
]
```

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

### Implement PlayButton in HTML

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of the PlayButton component within a media player container.

```html
<media-player>
  <div class="controls">
    <play-button></play-button>
  </div>
</media-player>
```

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

### Configure MediaPlayer keyboard shortcuts

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Example implementation of keyboard shortcut mapping within the MediaPlayer constructor.

```typescript
const player = new MediaPlayer({
  keyShortcuts: {
    togglePaused: 'k Space',
    seekBackward: 'j ArrowLeft',
    seekForward: 'l ArrowRight',
    toggleMuted: 'm',
    toggleFullscreen: 'f',
    volumeUp: 'ArrowUp',
    volumeDown: 'ArrowDown',
    speedUp: '>',
    slowDown: '<',
  },
});
```

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

### Handle Playback State Events

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Examples for handling basic playback lifecycle events.

```typescript
player.addEventListener('play', () => {
  console.log('Playback started');
});
```

```typescript
player.addEventListener('pause', () => {
  console.log('Playback paused');
});
```

```typescript
player.addEventListener('playing', () => {
  console.log('Actually playing (not just buffering)');
});
```

```typescript
player.addEventListener('ended', () => {
  console.log('Playback finished');
  // Show "Play Again" button
});
```

```typescript
player.addEventListener('started', () => {
  console.log('Playback has been initiated');
  // Track analytics event
});
```

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

### Implement Controls Component

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of the controls component with custom hide delay.

```html
<controls hide-delay="3000">
  <div class="controls">
    <play-button></play-button>
    <time-slider></time-slider>
    <volume-slider></volume-slider>
  </div>
</controls>
```

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

### Initialize Src object

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Example of creating a source object using the Src interface.

```typescript
const source: Src = {
  src: 'video-1080p.mp4',
  type: 'video/mp4',
  height: 1080,
  bitrate: 5000000,
};
```

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

### Implement MuteButton in HTML

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of the MuteButton component.

```html
<mute-button></mute-button>
```

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

### Handle Seek Events

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Examples for tracking seek operations.

```typescript
player.addEventListener('seeking', (e) => {
  console.log(`Seeking preview to ${e.detail}s`);
});
```

```typescript
player.addEventListener('seeked', () => {
  console.log('Seek completed, playback resumed');
});
```

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

### Conditional UI Building Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Uses capability check utilities to dynamically build and render player controls.

```typescript
import {
  canChangeVolume,
  canUsePictureInPicture,
  canUseVideoPresentation,
} from 'vidstack';

// Build control bar conditionally
const controls = [];

if (canChangeVolume()) {
  controls.push(createVolumeControl());
}

if (canUsePictureInPicture()) {
  controls.push(createPipButton());
}

if (canUseVideoPresentation()) {
  controls.push(createAdvancedSettings());
}

// Render controls
renderControlBar(controls);
```

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

### Format time with FormatTimeOptions

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Configuration for time formatting and usage examples for the formatTime utility.

```typescript
interface FormatTimeOptions {
  padHours?: boolean;      // Always show hours (00:00:00 vs 00:00)
  guide?: number;          // Reference duration for zero-padding
  firstZeroFilled?: boolean; // Pad first number segment
}
```

```typescript
import { formatTime } from 'vidstack';

formatTime(125);                                    // "2:05"
formatTime(125, { padHours: true });               // "0:02:05"
formatTime(3661);                                  // "1:01:01"
```

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

### getTimeRangesStart()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Retrieves the start time of the first range in a TimeRange object.

```APIDOC
## getTimeRangesStart(ranges)

### Description
Returns the start time of the first range in the provided TimeRange object, or null if empty.

### Parameters
- **ranges** (TimeRange) - Required - The TimeRange object to query.
```

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

### Implement ControlsGroup Component

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of grouping controls within a controls container.

```html
<controls>
  <controls-group>
    <play-button></play-button>
    <caption-button></caption-button>
  </controls-group>
</controls>
```

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

### Handle Buffering Events

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Example for handling playback interruptions due to data loading.

```typescript
player.addEventListener('waiting', () => {
  console.log('Buffering...');
  // Show loading spinner
});
```

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

### Implement SeekButton in HTML

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Example usage of the SeekButton component for forward and backward seeking.

```html
<seek-button seconds="-10"></seek-button>
<seek-button seconds="10"></seek-button>
```

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

### Configure HLS Stream

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Setup for HLS live streams by specifying the MIME type and live-specific configuration options.

```typescript
const player = new MediaPlayer({
  src: {
    src: 'https://example.com/stream.m3u8',
    type: 'application/x-mpegURL',
  },
  title: 'Live Stream',
  streamType: 'live',
  liveEdgeTolerance: 10,
});
```

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

### Robust Media Loading Example

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Filters a list of media sources based on browser playback support using utility functions.

```typescript
import { canPlayType, getMediaSourceType } from 'vidstack';

const sources = [
  { src: 'video.mp4', type: 'video/mp4' },
  { src: 'video.webm', type: 'video/webm' },
  { src: 'video.ogv', type: 'video/ogg' },
];

// Filter to supported formats
const supportedSources = sources.filter(src => {
  const support = canPlayType(src.type);
  return support !== '';
});

player.src = supportedSources;
```

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

### Play media playback

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Initiates media playback. Returns a promise that resolves when playback starts or rejects on error.

```typescript
play(): Promise<void>
```

```typescript
const player = document.querySelector('media-player');
await player.play();
```

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

### Selecting Audio Tracks

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Tracks.md

Provides examples for finding and setting the active audio track by language or kind, and disabling audio.

```typescript
// Get available audio tracks
const { audioTracks } = player.$state;

// Find track by language
const frenchTrack = audioTracks().find(t => t.language === 'fr');
if (frenchTrack) {
  player.$state.audioTrack.set(frenchTrack);
}

// Find track by label
const descriptiveAudio = audioTracks().find(t => t.kind === 'description');
if (descriptiveAudio) {
  player.$state.audioTrack.set(descriptiveAudio);
}

// Disable audio track (all tracks)
player.$state.audioTrack.set(null);
```

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

### Chapter VTT Format

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Tracks.md

Standard WebVTT format for defining chapter markers with start and end timestamps.

```text
WEBVTT

00:00:00.000 --> 00:05:30.000
Introduction

00:05:30.000 --> 00:15:45.000
Getting Started

00:15:45.000 --> 00:28:00.000
Advanced Topics

00:28:00.000 --> 00:30:00.000
Conclusion
```

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

### startLoading()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Triggers media loading.

```APIDOC
### startLoading()

#### Description
Trigger media loading (used with custom load strategy).

#### Signature
`startLoading(): void`
```

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

### Define and Use AudioTrack

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Interface for audio track configuration and example usage for listing and selecting tracks.

```typescript
interface AudioTrack {
  id: string;              // Unique identifier
  kind: string;            // 'main', 'alternative', 'commentary', 'translation'
  label: string;           // User-readable label
  language: string;        // BCP 47 language code (e.g., 'en', 'es', 'fr')
  default?: boolean;       // Whether this track is default
}
```

```typescript
const { audioTracks, audioTrack } = player.$state;

// List available audio tracks
console.log(audioTracks());

// Select French audio
const frenchTrack = audioTracks().find(t => t.language === 'fr');
if (frenchTrack) {
  player.$state.audioTrack.set(frenchTrack);
}
```

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

### Define and Use VideoQuality

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Interface for video quality levels and example usage for selecting quality via player state.

```typescript
interface VideoQuality {
  bitrate?: number;        // Bitrate in bps
  codec?: string;          // Video codec
  frameRate?: number;      // Frames per second
  width?: number;          // Video width in pixels
  height?: number;         // Video height in pixels
  label?: string;          // User-friendly label (e.g., "1080p")
  constructor?: Function;  // Quality class constructor
}
```

```typescript
const { qualities, quality } = player.$state;

effect(() => {
  const currentQuality = quality();
  console.log(`Selected quality: ${currentQuality?.height}p`);
});

// Select specific quality
const hd1080 = qualities().find(q => q.height === 1080);
if (hd1080) {
  player.$state.quality.set(hd1080);
}
```

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

### Initialize MediaPlayer and MediaProvider

Source: https://github.com/vidstack/player/blob/main/_autodocs/00-START-HERE.md

Sets up the core player instance and configures the media provider with specific loaders.

```typescript
import { MediaPlayer, MediaProvider, VideoProviderLoader } from 'vidstack';

const player = new MediaPlayer({
  src: 'video.mp4',
  title: 'My Video',
  controls: true,
  volume: 0.8,
});

const provider = new MediaProvider({
  loaders: [new VideoProviderLoader()],
});
```

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

### Access and configure logger

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Demonstrates accessing the logger via media context and setting the log level during initialization.

```typescript
const { logger } = useMediaContext();

logger?.log('Custom log message');
logger?.error('Error occurred');
logger?.debug('Debug information');
```

```typescript
const player = new MediaPlayer({
  logLevel: 'debug', // 'silent' | 'error' | 'warn' | 'info' | 'debug'
});
```

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

### load()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaProvider.md

Initializes the provider loader with a target DOM element to begin media playback.

```APIDOC
## load()

### Description
Triggers the provider loader to initialize with the given target element. The loader will be selected based on the current media source.

### Method
load(target: HTMLElement | null | undefined): void

### Parameters
- **target** (HTMLElement | null | undefined) - Required - The DOM element to load the provider into (e.g., <video>, <iframe>)

### Example
```typescript
const provider = document.querySelector('media-provider');
const videoElement = document.createElement('video');
provider.load(videoElement);
```
```

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

### Configure YouTube Provider

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Initialize the player with a YouTube source and the required provider loader.

```typescript
import { YouTubeProviderLoader } from 'vidstack';

const player = new MediaPlayer({
  src: 'https://youtube.com/watch?v=dQw4w9WgXcQ',
});

const provider = new MediaProvider({
  loaders: [new YouTubeProviderLoader()],
});
```

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

### Initialize MediaPlayer

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Instantiates the player with initial configuration and appends it to the DOM.

```typescript
import { MediaPlayer, MediaProvider } from 'vidstack';

const player = new MediaPlayer({
  paused: true,
  title: 'My Video',
  src: 'https://example.com/video.mp4',
  volume: 0.8,
  controls: true,
});

document.getElementById('player-root').appendChild(player.el);

// Start playback
await player.play();
```

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

### Initialize Video Provider

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaProvider.md

Configures a basic video provider using the VideoProviderLoader.

```typescript
import { MediaPlayer, MediaProvider, VideoProviderLoader } from 'vidstack';

const player = new MediaPlayer({
  src: 'https://example.com/video.mp4',
});

const provider = new MediaProvider({
  loaders: [new VideoProviderLoader()],
});

// In HTML structure:
// <media-player>
//   <media-provider>
//     <video></video>
//   </media-provider>
// </media-player>
```

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

### Configure Eager Loading

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Initiates media loading immediately upon player initialization.

```typescript
const player = new MediaPlayer({
  src: 'video.mp4',
  load: 'eager', // Load immediately
});
```

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

### Access TimeRange Data

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Example of accessing and logging buffered time ranges from the player state.

```typescript
const { buffered, seekable } = player.$state;

effect(() => {
  const range = buffered();
  console.log(`Buffered: ${range.start(0)}s - ${range.end(range.length - 1)}s`);
});
```

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

### Define and Use TextTrack

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Interface for subtitle/caption tracks and example usage for filtering and selecting tracks.

```typescript
interface TextTrack {
  id: string;              // Unique identifier
  kind: TrackKind;         // 'subtitles', 'captions', 'descriptions', 'chapters', 'metadata'
  label: string;           // User-readable label
  language?: string;       // BCP 47 language code
  src?: string;            // Track file URL
  default?: boolean;       // Whether this track is default
  cues?: TextTrackCueList; // Track cues (for chapters, metadata)
}
```

```typescript
const { textTracks, textTrack } = player.$state;

// List caption tracks
const captions = textTracks().filter(t => t.kind === 'captions');

// Select specific caption track
const englishCaptions = captions.find(t => t.language === 'en');
if (englishCaptions) {
  player.$state.textTrack.set(englishCaptions);
}

// Disable captions
player.$state.textTrack.set(null);
```

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

### Implementing a Custom Provider

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Create a custom provider by implementing the MediaProviderLoader interface and registering it in the player configuration.

```typescript
class CustomProviderLoader implements MediaProviderLoader {
  canPlay(src: string, type?: string): boolean {
    return type === 'application/x-custom' || src.endsWith('.custom');
  }

  async load(media: MediaContext): Promise<MediaProvider> {
    const element = document.createElement('div');
    element.id = 'custom-player';
    
    // Initialize custom player
    const customPlayer = new CustomPlayerLib(element);
    
    // Map to provider interface
    return {
      currentTime: 0,
      paused: true,
      muted: false,
      volume: 1,
      playbackRate: 1,
      
      async play() {
        await customPlayer.play();
      },
      
      async pause() {
        await customPlayer.pause();
      },
      
      seek(time: number) {
        customPlayer.seek(time);
      },
      
      destroy() {
        customPlayer.dispose();
      },
    };
  }
}

// Use custom provider
const provider = new MediaProvider({
  loaders: [
    new CustomProviderLoader(),
    new VideoProviderLoader(), // Fallback
  ],
});
```

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

### startLoadingPoster()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Triggers poster image loading.

```APIDOC
### startLoadingPoster()

#### Description
Trigger poster image loading (used with custom load strategy).

#### Signature
`startLoadingPoster(): void`
```

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

### Select Quality

Source: https://github.com/vidstack/player/blob/main/_autodocs/INDEX.md

Find and set a specific video quality level.

```typescript
const { qualities } = player.$state;
const quality = qualities().find(q => q.height === 1080);
if (quality) remote.setQuality(quality);
```

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

### Configure Custom Loading

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Provides manual control over when media loading begins.

```typescript
const player = new MediaPlayer({
  src: 'video.mp4',
  load: 'custom', // Manual control
});

// Later, when ready to load:
player.startLoading();
```

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

### Get Time Range End

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Retrieves the end time of the last range in the provided TimeRange object.

```typescript
import { getTimeRangesEnd } from 'vidstack';

const buffered = player.$state.buffered();
const bufferEnd = getTimeRangesEnd(buffered);
```

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

### View project documentation structure

Source: https://github.com/vidstack/player/blob/main/_autodocs/DELIVERABLES.md

Displays the directory layout of the generated documentation files within the workspace.

```text
/workspace/home/output/
├── 00-START-HERE.md              ✓ Quick navigation guide (6.7 KB)
├── INDEX.md                      ✓ Complete index & lookup (12 KB)
├── README.md                     ✓ Project overview (2.3 KB)
├── SUMMARY.txt                   ✓ Generation report (11 KB)
├── DELIVERABLES.md               ✓ This file
├── types.md                      ✓ Type definitions (12 KB)
├── configuration.md              ✓ Configuration options (11 KB)
├── errors.md                     ✓ Error handling (12 KB)
└── api-reference/
    ├── MediaPlayer.md            ✓ Main component (11 KB)
    ├── MediaProvider.md          ✓ Source loading (6.6 KB)
    ├── UIComponents.md           ✓ UI controls (13 KB)
    ├── MediaRemoteControl.md     ✓ Playback control (11 KB)
    ├── Providers.md              ✓ Media adapters (9.1 KB)
    ├── Tracks.md                 ✓ Audio/captions (12 KB)
    ├── Events.md                 ✓ Event system (13 KB)
    └── Utilities.md              ✓ Helper functions (12 KB)
```

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

### Playback State Events

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Events related to the playback lifecycle, including starting, pausing, ending, and seeking through media.

```APIDOC
## Event: play

### Description
Fired when playback begins, including resuming from a paused state.

### Detail Type
void

## Event: pause

### Description
Fired when playback is paused by the user or programmatically.

### Detail Type
void

## Event: playing

### Description
Fired when the playing state is confirmed and playback continues, including recovery from buffering.

### Detail Type
void

## Event: ended

### Description
Fired when playback reaches the natural end of the media.

### Detail Type
void

## Event: seeking

### Description
Fired during a seek operation, such as when a user drags the time slider.

### Detail Type
number (current seek time in seconds)

## Event: seeked

### Description
Fired after a seek operation completes.

### Detail Type
void

## Event: time-update

### Description
Fired periodically (approximately every 250ms) to indicate progress.

### Detail Type
void

## Event: duration-change

### Description
Fired when the media duration becomes known or changes.

### Detail Type
void

## Event: buffered-change

### Description
Fired when the buffered ranges of the media change.

### Detail Type
void

## Event: waiting

### Description
Fired when playback pauses because more data is required.

### Detail Type
void

## Event: started

### Description
Fired when the first playback attempt begins.

### Detail Type
void
```

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

### Implement media download link

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Uses getDownloadFile to retrieve metadata and trigger a browser download.

```typescript
import { getDownloadFile } from 'vidstack';

const info = getDownloadFile('https://example.com/videos/my-video.mp4');
console.log(info);
// { url: 'https://...', filename: 'my-video.mp4' }

// Create download link
const link = document.createElement('a');
link.href = info.url;
link.download = info.filename;
link.click();
```

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

### Project File Structure

Source: https://github.com/vidstack/player/blob/main/_autodocs/00-START-HERE.md

Visual representation of the documentation directory layout.

```text
/output
├── 00-START-HERE.md              ← You are here
├── INDEX.md                      ← Full navigation
├── README.md                     ← Project overview
├── SUMMARY.txt                   ← Generation report
├── types.md                      ← All type definitions
├── configuration.md              ← Configuration options
├── errors.md                     ← Error handling
└── api-reference/
    ├── MediaPlayer.md            ← Main component
    ├── MediaProvider.md          ← Source loading
    ├── UIComponents.md           ← UI controls
    ├── MediaRemoteControl.md     ← Playback control
    ├── Providers.md              ← Media adapters
    ├── Tracks.md                 ← Audio/captions
    ├── Events.md                 ← Event system
    └── Utilities.md              ← Helper functions
```

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

### Set player source

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Demonstrates various ways to assign sources to the player.

```typescript
// Single file
player.src = 'video.mp4';

// With type
player.src = { src: 'stream.m3u8', type: 'application/x-mpegURL' };

// Multiple quality levels
player.src = [
  { src: 'video-360p.mp4', height: 360 },
  { src: 'video-720p.mp4', height: 720 },
  { src: 'video-1080p.mp4', height: 1080 },
];
```

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

### GoogleCastLoader Configuration

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Setting up the Google Cast configuration within the MediaPlayer instance.

```typescript
const player = new MediaPlayer({
  googleCast: {
    appId: 'YOUR_CAST_APP_ID',
    isMediaLoaded: () => {
      // Check if media is loaded
      return true;
    },
  },
});
```

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

### Implement MenuItems

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Basic usage of the MenuItems container.

```html
<menu-items>
  <menu-item>Option 1</menu-item>
  <menu-item>Option 2</menu-item>
</menu-items>
```

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

### Format time durations

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Converts seconds into a human-readable string format, supporting optional hour padding and guide durations.

```typescript
import { formatTime } from 'vidstack';

formatTime(0);                           // "0:00"
formatTime(125);                         // "2:05"
formatTime(3661);                        // "1:01:01"
formatTime(3661, { padHours: true });   // "01:01:01"
formatTime(125, { guide: 3600 });       // "0:02:05" (with hour padding)
```

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

### requestFullscreen()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Requests fullscreen mode.

```APIDOC
### requestFullscreen()

#### Description
Request fullscreen mode.

#### Signature
`requestFullscreen(): Promise<void>`

#### Throws
Error if fullscreen API is unavailable or user denies request.
```

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

### Enable State Persistence

Source: https://github.com/vidstack/player/blob/main/_autodocs/INDEX.md

Configure storage to automatically save player state.

```typescript
const player = new MediaPlayer({
  src: 'video.mp4',
  storage: 'my-player-key',
  // Automatically saves: time, volume, quality, captions
});
```

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

### Implement Menu Structure

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Basic HTML structure for a menu containing a button and items.

```html
<menu>
  <menu-button></menu-button>
  <menu-items>
    <menu-item>Option 1</menu-item>
    <menu-item>Option 2</menu-item>
  </menu-items>
</menu>
```

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

### MediaStorage

Source: https://github.com/vidstack/player/blob/main/_autodocs/types.md

Interface for implementing custom storage solutions for player state persistence.

```APIDOC
## MediaStorage Interface

### Description
Interface for implementing custom storage. Users can implement this to define how player state is saved and retrieved.

### Methods
- **setItem(key: string, value: string): void | Promise<void>** - Save player state to storage.
- **getItem(key: string): string | null | Promise<string | null>** - Retrieve player state from storage.
```

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

### Configure Keyboard Shortcuts

Source: https://github.com/vidstack/player/blob/main/_autodocs/INDEX.md

Define custom key bindings for player controls.

```typescript
const player = new MediaPlayer({
  src: 'video.mp4',
  keyShortcuts: {
    togglePaused: 'k Space',
    seekBackward: 'j ArrowLeft',
    seekForward: 'l ArrowRight',
    toggleMuted: 'm',
    toggleFullscreen: 'f',
  },
});
```

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

### Implement MenuButton

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Basic usage of the MenuButton component.

```html
<menu-button>Settings</menu-button>
```

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

### Source Configuration

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Configuring media sources with specific MIME types and metadata for automatic type detection.

```APIDOC
## Source Configuration

### Description
Specify MIME types and metadata on media sources to enable automatic type detection.

### Usage (TypeScript)
```typescript
const sources = [
  { src: 'video-360p.mp4', type: 'video/mp4', height: 360 },
  { src: 'video-720p.mp4', type: 'video/mp4', height: 720 },
  { src: 'video-1080p.mp4', type: 'video/mp4', height: 1080 },
];

player.src = sources;
```

### Usage (HTML)
```html
<media-provider>
  <video>
    <source src="video-360p.mp4" type="video/mp4" data-height="360" />
    <source src="video-720p.mp4" type="video/mp4" data-height="720" />
    <source src="video-1080p.mp4" type="video/mp4" data-height="1080" />
  </video>
</media-provider>
```
```

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

### MediaPlayer Initialization

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

The MediaPlayer constructor initializes the player instance with configuration options such as initial state, source, and controls.

```APIDOC
## MediaPlayer Constructor

### Description
Initializes a new media player instance with the provided configuration options.

### Parameters
- **paused** (boolean) - Optional - Initial playback state.
- **title** (string) - Optional - Title of the media.
- **src** (string) - Optional - Source URL of the media.
- **volume** (number) - Optional - Initial volume level (0.0 to 1.0).
- **controls** (boolean) - Optional - Whether to show default controls.
- **storage** (string | object) - Optional - Configuration for persistent storage.
- **keyShortcuts** (object) - Optional - Mapping of actions to keyboard keys.
```

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

### fullscreen-change

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Fired when entering or exiting fullscreen mode.

```APIDOC
## fullscreen-change

### Description
Fired when entering or exiting fullscreen.

### Detail Type
boolean (true = entering, false = exiting)

### Example
```typescript
player.addEventListener('fullscreen-change', (e) => {
  const isFullscreen = player.$state.fullscreen();
  console.log(`Fullscreen: ${isFullscreen}`);
});
```
```

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

### Fullscreen Control Methods

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Methods to enter, exit, or toggle fullscreen mode.

```APIDOC
## enterFullscreen(request?: Event | HTMLElement): Promise<void>

### Description
Enters fullscreen mode. Returns a promise that resolves when active.

## exitFullscreen(request?: Event): Promise<void>

### Description
Exits fullscreen mode. Returns a promise that resolves when exited.

## toggleFullscreen(request?: Event | HTMLElement): Promise<void>

### Description
Toggles the current fullscreen state.
```

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

### Implement MenuItem

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Basic usage of the MenuItem component.

```html
<menu-item>Quality</menu-item>
```

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

### Configure HLS Stream with Fallback

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaProvider.md

Sets up HLS support with a standard video provider as a fallback.

```typescript
import { HLSProviderLoader, VideoProviderLoader } from 'vidstack';

const provider = new MediaProvider({
  loaders: [ 
    new HLSProviderLoader(),
    new VideoProviderLoader(), // Fallback
  ],
});

player.src = 'https://example.com/stream.m3u8';
```

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

### setQuality()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Selects the video quality for the player.

```APIDOC
## setQuality(quality: VideoQuality | null, request?: Event)

### Description
Selects video quality. Pass null to enable auto-quality.

### Parameters
- **quality** (VideoQuality | null) - Required - Quality option or null for auto
- **request** (Event) - Optional - Originating event

### Example
```typescript
const { qualities } = player.$state;
const hd = qualities().find(q => q.height === 1080);
if (hd) remote.setQuality(hd);
```
```

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

### Provider Selection by File Extension

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

The system selects a provider based on the file extension found in the URL.

```typescript
'.mp4', '.webm', '.ogg' // → VideoProviderLoader
'.m3u8' // → HLSProviderLoader
'.mpd' // → DASHProviderLoader
```

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

### Configure Chapter Navigation

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Tracks.md

Define chapter tracks in HTML and use the chapters-radio-group component for navigation.

```html
<media-player>
  <media-provider>
    <video>
      <source src="video.mp4" type="video/mp4" />
      <track src="chapters.vtt" kind="chapters" label="Chapters" />
    </video>
  </media-provider>
  
  <controls>
    <div class="chapters-menu">
      <chapters-radio-group></chapters-radio-group>
    </div>
  </controls>
</media-player>
```

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

### controls-show

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Fired when the UI controls become visible.

```APIDOC
## controls-show

### Description
Fired when UI controls become visible.

### Detail Type
void

### Example
player.addEventListener('controls-show', () => {
  console.log('Controls shown');
});
```

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

### Configure Play-on-Demand Loading

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Defers media loading until the user explicitly requests playback.

```typescript
const player = new MediaPlayer({
  src: 'video.mp4',
  load: 'play', // Load when user clicks play
});
```

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

### Implement Fallback Sources

Source: https://github.com/vidstack/player/blob/main/_autodocs/errors.md

Provide multiple source formats to allow the player to automatically attempt playback with alternative codecs if the primary source fails.

```typescript
// Provide fallback sources
const sources = [
  { src: 'video.mp4', type: 'video/mp4' },        // Modern browsers
  { src: 'video.webm', type: 'video/webm' },      // Firefox
  { src: 'video.ogv', type: 'video/ogg' },        // Older Firefox
];

player.src = sources;

player.addEventListener('error', (e) => {
  if (e.detail.code === 'SRC_NOT_SUPPORTED') {
    console.log('Trying fallback sources...');
    // Player will automatically try next source
  }
});
```

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

### error

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Fired when playback or loading fails.

```APIDOC
## error

### Description
Fired when playback or loading fails.

### Detail Type
`MediaErrorDetail`

### Example
```typescript
player.addEventListener('error', (e) => {
  const { code, message } = e.detail;
  console.error(`${code}: ${message}`);
});
```
```

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

### Implement Radio

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/UIComponents.md

Basic usage of the Radio component.

```html
<radio value="480p">480p</radio>
```

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

### AudioProviderLoader Usage

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Configuring a media player to use the AudioProviderLoader for audio files.

```typescript
import { AudioProviderLoader } from 'vidstack';

const provider = new MediaProvider({
  loaders: [new AudioProviderLoader()],
});

player.src = 'podcast.mp3';
```

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

### VideoProviderLoader

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Handles standard HTML5 video and audio elements for common file formats like .mp4, .webm, .mp3, and .wav.

```APIDOC
## VideoProviderLoader

### Description
Handles HTML5 <video> and <audio> elements for various media formats.

### Methods
- **canPlay(src: string, type?: string)**: Returns true if the format is supported.
- **load(media: MediaContext)**: Creates and configures the video/audio element.
```

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

### Enter Fullscreen Mode

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaRemoteControl.md

Requests the player to enter fullscreen mode, returning a promise that resolves upon success.

```typescript
enterFullscreen(request?: Event | HTMLElement): Promise<void>
```

```typescript
await remote.enterFullscreen();
```

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

### Select Captions

Source: https://github.com/vidstack/player/blob/main/_autodocs/INDEX.md

Find and set a specific text track by language.

```typescript
const { textTracks } = player.$state;
const captions = textTracks().find(t => t.language === 'en');
remote.setTextTrack(captions);
```

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

### media-player-connect

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Fired when the MediaPlayer component connects to the DOM.

```APIDOC
## media-player-connect

### Description
Fired when the MediaPlayer component connects to the DOM.

### Detail Type
`MediaPlayer`

### Example
```typescript
document.addEventListener('media-player-connect', (e) => {
  const player = e.detail;
  console.log('Player initialized');
});
```
```

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

### getDownloadFile(url: string)

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

Generates a download link and suggested filename for a given media URL.

```APIDOC
## getDownloadFile(url: string)

### Description
Generates a download link and suggested filename for a given media URL.

### Signature
`function getDownloadFile(url: string): FileDownloadInfo`

### Returns
- **url** (string) - Download URL
- **filename** (string) - Suggested filename

### Example
```typescript
import { getDownloadFile } from 'vidstack';

const info = getDownloadFile('https://example.com/videos/my-video.mp4');
```
```

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

### pip-change

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Fired when entering or exiting Picture-in-Picture mode.

```APIDOC
## pip-change

### Description
Fired when entering or exiting Picture-in-Picture.

### Detail Type
void

### Example
```typescript
player.addEventListener('pip-change', () => {
  const isPip = player.$state.pictureInPicture();
  console.log(`PiP mode: ${isPip}`);
});
```
```

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

### quality-change

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Events.md

Fired when the video quality selection changes.

```APIDOC
## quality-change

### Description
Fired when Video quality selection changes.

### Detail Type
VideoQuality | null

### Example
```typescript
player.addEventListener('quality-change', (e) => {
  const quality = e.detail;
  console.log(`Quality changed to ${quality?.height}p`);
});
```
```

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

### toggleFullscreen()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/MediaPlayer.md

Toggles fullscreen mode.

```APIDOC
### toggleFullscreen()

#### Description
Toggle fullscreen mode.

#### Signature
`toggleFullscreen(): Promise<void>`
```

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

### Define UI Components

Source: https://github.com/vidstack/player/blob/main/_autodocs/00-START-HERE.md

Structure the player interface using standard HTML-like custom elements for controls.

```html
<controls>
  <play-button></play-button>
  <time-slider></time-slider>
  <volume-slider></volume-slider>
  <fullscreen-button></fullscreen-button>
</controls>
```

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

### useMediaContext()

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Utilities.md

A hook to retrieve the current media context, providing access to the player instance, remote controls, and reactive state.

```APIDOC
## useMediaContext()

### Description
A hook to retrieve the current media context, providing access to the player instance, remote controls, and reactive state.

### Returns
- **player**: MediaPlayer instance
- **remote**: MediaRemoteControl instance
- **$state**: Reactive media state
- **$props**: Player properties
- **qualities**: VideoQualityList
- **audioTracks**: AudioTrackList
- **textTracks**: TextTrackList
- **logger**: Logger instance
- **notify**: Event notification function

### Example
```typescript
import { useMediaContext } from 'vidstack';

function MyComponent() {
  const { player, remote, $state } = useMediaContext();
}
```

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

### DASHProviderLoader Usage

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Configuring a media player to use the DASHProviderLoader with a fallback to the standard video loader.

```typescript
import { DASHProviderLoader, VideoProviderLoader } from 'vidstack';

const provider = new MediaProvider({
  loaders: [
    new DASHProviderLoader(),
    new VideoProviderLoader(), // Fallback
  ],
});

player.src = 'https://example.com/stream.mpd';
```

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

### Configure Multiple Source Qualities

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Define multiple source objects with height and bitrate properties for adaptive quality selection.

```typescript
const player = new MediaPlayer({
  src: [
    { src: 'video-360p.mp4', height: 360, bitrate: 1000000 },
    { src: 'video-720p.mp4', height: 720, bitrate: 2500000 },
    { src: 'video-1080p.mp4', height: 1080, bitrate: 5000000 },
  ],
  title: 'Multi-Quality Video',
});
```

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

### Configure Persistent Storage

Source: https://github.com/vidstack/player/blob/main/_autodocs/configuration.md

Enable state persistence using either built-in localStorage or a custom storage implementation.

```typescript
// Using localStorage
const player = new MediaPlayer({
  src: 'video.mp4',
  storage: 'my-player', // Uses localStorage with 'my-player' key prefix
});

// Using custom storage
class DatabaseStorage {
  async setItem(key, value) {
    await fetch('/api/player-state', {
      method: 'POST',
      body: JSON.stringify({ key, value }),
    });
  }

  async getItem(key) {
    const res = await fetch(`/api/player-state/${key}`);
    return res.text();
  }
}

const player = new MediaPlayer({
  src: 'video.mp4',
  storage: new DatabaseStorage(),
});
```

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

### DASHProviderLoader

Source: https://github.com/vidstack/player/blob/main/_autodocs/api-reference/Providers.md

Handles DASH (Dynamic Adaptive Streaming over HTTP) streams using the dash.js library.

```APIDOC
## DASHProviderLoader

### Description
Handles DASH (.mpd) manifests for adaptive streaming.

### Methods
- **canPlay(src: string, type?: string)**: Detects DASH URLs.
- **load(media: MediaContext)**: Initializes DASH playback.
```