### setupPlayer

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Executes the provided player setup function. It calls the custom setup function, passing `loadScriptOrStyle` as the loader, and handles any exceptions. Throws `SetupPlayerError` on setup failure.

```APIDOC
## setupPlayer()

### Description
Executes player setup function.

### Parameters
- **options** (ByteArkPlayerOptions) - Required - Player configuration
- **setupPlayerFunction** (ISetupPlayerFunction) - Required - Custom setup function to execute

### Returns
Promise<void>

### Throws
- SetupPlayerError: on setup failure
```

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

### Default Player Setup Function

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Default implementation for setting up the player. This function delegates the setup process to the `window.bytearkPlayer.setup()` method.

```typescript
export const defaultSetupPlayerFunction: ISetupPlayerFunction = async (
  options,
  loaderFunction,
  loadPluginOptions
) => {
  await window.bytearkPlayer.setup(options, loaderFunction, loadPluginOptions)
}
```

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

### Custom Player Setup Function

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/integration-guide.md

Define a custom setup function to load plugins or call the default setup logic. This allows for advanced initialization control.

```typescript
const customSetup = async (options, loadScriptOrStyle, customOptions) => {
  // Custom plugin loading
  await loadScriptOrStyle(
    'my-plugin',
    'https://example.com/plugin.js',
    'script'
  )
  
  // Call default setup
  await window.bytearkPlayer.setup(options, loadScriptOrStyle, customOptions)
}

const playerProps = {
  options: playerOptions,
  setupPlayerFunction: customSetup
}
```

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

### Complete ByteArk Player Vue Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/integration-guide.md

A full Vue component example demonstrating the ByteArk Player integration, including template, script setup, player options, event handlers, and styles.

```vue
<template>
  <div class="player-wrapper">
    <ByteArkPlayerContainer
      :options="playerOptions"
      @ready="onPlayerReady"
      @play="onPlay"
      @pause="onPause"
      @error="onError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'

const playerRef = ref<ByteArkPlayer | null>(null)

const playerOptions: ByteArkPlayerOptions = {
  autoplay: 'any',
  controls: true,
  fluid: true,
  aspectRatio: '16:9',
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL',
    title: 'My Video'
  }],
  poster: 'https://example.com/poster.jpg'
}

const onPlayerReady = (player: ByteArkPlayer) => {
  playerRef.value = player
  console.log('Player is ready')
}

const onPlay = (player: ByteArkPlayer, currentTime: number) => {
  console.log(`Playing at ${currentTime}s`)
}

const onPause = (player: ByteArkPlayer, currentTime: number) => {
  console.log(`Paused at ${currentTime}s`)
}

const onError = (player: ByteArkPlayer, error: unknown) => {
  console.error('Player error:', error)
}
</script>

<style lang="scss" scoped>
@import '~@byteark/byteark-player-vue/dist/@byteark/byteark-player-vue.css';

.player-wrapper {
  max-width: 100%;
  margin: 0 auto;
}
</style>
```

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

### Execute Player Setup Function

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Executes a custom player setup function, passing `loadScriptOrStyle` as the loader. Handles any exceptions during the setup process. Throws `SetupPlayerError` on setup failure.

```typescript
export async function setupPlayer(
  options: ByteArkPlayerOptions,
  setupPlayerFunction: ISetupPlayerFunction
): Promise<void>;

```

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

### Standard Endpoint URL Examples

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/configuration.md

Examples of constructing standard resource URLs for player core JavaScript and CSS files.

```text
https://byteark-sdk.cdn.byteark.com/player-core/v2/byteark-player.min.js
https://byteark-sdk.cdn.byteark.com/player-core/v2/byteark-player.min.css
```

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

### defaultSetupPlayerFunction

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Default implementation for setting up the player. This function delegates the setup process to the `window.bytearkPlayer.setup()` method.

```APIDOC
## defaultSetupPlayerFunction

### Description
Default implementation for player setup. Delegates to `window.bytearkPlayer.setup()`.

### Signature
```typescript
export const defaultSetupPlayerFunction: ISetupPlayerFunction = async (
  options,
  loaderFunction,
  loadPluginOptions
) => {
  await window.bytearkPlayer.setup(options, loaderFunction, loadPluginOptions)
}
```
```

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

### Install ByteArk Player Vue

Source: https://github.com/byteark/byteark-player-vue/blob/main/README.md

Install the library using your preferred package manager.

```bash
# For NPM
npm install --save @byteark/byteark-player-vue
# For Yarn
yarn add @byteark/byteark-player-vue
# For PNPM
pnpm add @byteark/byteark-player-vue
```

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

### Custom Server Endpoint URL Examples

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/configuration.md

Examples of constructing resource URLs for player libraries when using a custom server endpoint with a player slug ID.

```text
https://player.byteark.com/players/my-slug/libraries/index.js
https://player.byteark.com/players/my-slug/libraries/styles.css
```

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

### Load Script Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Demonstrates how to load a JavaScript plugin dynamically using its ID, source URL, and type.

```typescript
import { loadScriptOrStyle } from '@byteark/byteark-player-vue'

// Load a script
loadScriptOrStyle('my-plugin', 'https://example.com/plugin.js', 'script')
  .then(() => console.log('Plugin loaded'))
  .catch(err => console.error('Failed to load plugin', err))
```

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

### Install Peer Dependency

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/module-exports.md

Command to install the required @types/video.js peer dependency using npm.

```bash
npm install @types/video.js
```

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

### Full Player Configuration with Lighthouse Metadata

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Example demonstrating how to configure player options including sources with Lighthouse metadata and the Lighthouse plugin.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL',
    lighthouse: {
      user: {
        userId: 'user12345',
        age: '25-34',
        country: 'US',
        city: 'San Francisco',
        gender: 'M',
        subscriptionPlan: 'premium'
      },
      video: {
        videoTitle: 'Product Demo',
        seriesId: 'series1',
        seriesTitle: 'Getting Started',
        season: '1',
        episode: '1',
        duration: '600',
        genres: 'Educational,Technology',
        rating: '5'
      },
      custom: {
        d1: 'campaign_id:camp123',
        d2: 'utm_source:email',
        d3: 'utm_medium:newsletter'
      }
    }
  }],
  plugins: {
    bytearkLighthouse: {
      projectId: 'proj_abc123',
      debug: false,
      playbackStuckUi: 'auto'
    }
  }
}
```

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

### Storyboard Plugin Usage Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Shows how to configure the Storyboard plugin with specific dimensions and auto-discovery settings.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkStoryboard: {
      width: 160,
      height: 90,
      defaultStoryboardSize: 'medium',
      autoDiscoverStoryboard: true
    }
  }
}
```

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

### Volume Booster Plugin Usage Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Demonstrates how to integrate and configure the Volume Booster plugin with custom volume multiplier.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [...],
  plugins: {
    bytearkVolumeBooster: {
      multiplier: 2.0,  // Double the volume
      debug: false
    }
  }
}
```

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

### Install ByteArk Player Vue

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/README.md

Install the ByteArk Player Vue package and its TypeScript types using npm.

```bash
npm install @byteark/byteark-player-vue @types/video.js
```

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

### IOnPlayerSetupFunction

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Callback function that is invoked when the player setup process has been successfully completed.

```APIDOC
## IOnPlayerSetupFunction

### Description
Callback when player setup completes.

### Returns
- void
```

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

### Dynamic Configuration with Environment Variables

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/configuration.md

Example of configuring player sources and lighthouse plugin settings using environment variables, with fallbacks to default values. This is useful for CI/CD environments.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: process.env.VUE_APP_VIDEO_URL || 'https://default.example.com/video.m3u8',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkLighthouse: {
      projectId: process.env.VUE_APP_LIGHTHOUSE_PROJECT_ID || 'default-proj'
    }
  }
}
```

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

### Basic ByteArk Player Vue Setup

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/README.md

A basic Vue.js component setup for the ByteArk Player, including template, script, and style. Configure player options such as aspect ratio and video sources.

```vue
<template>
  <ByteArkPlayerContainer :options="playerOptions" />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = {
  fluid: true,
  aspectRatio: '16:9',
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL'
  }]
}
</script>

<style>
@import '~@byteark/byteark-player-vue/dist/@byteark/byteark-player-vue.css';
</style>
```

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

### Vue Usage Example with Ads Plugin

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Example of how to configure the ByteArk Player in a Vue component, including the ads plugin with multiple ad configurations and ad markers.

```vue
<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkAds: {
      ads: [
        { adTagUrl: 'https://example.com/pre.xml', time: 'pre' },
        { adTagUrl: 'https://example.com/mid.xml', time: 30 },
        { adTagUrl: 'https://example.com/post.xml', time: 'post' }
      ],
      showAdMarker: true
    }
  }
}
</script>
```

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

### Minimal Player Configuration (No Plugins)

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Configure the player with only essential options, omitting any plugins. This is useful for a basic player setup.

```typescript
// Minimal configuration - no plugins
const playerOptions: ByteArkPlayerOptions = {
  sources: [...] 
}
```

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

### Window API Export Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/module-exports.md

Demonstrates accessing the isBrowserSupportDrm utility function exposed through the window.bytearkPlayer object.

```typescript
window.bytearkPlayer = {
  isBrowserSupportDrm,  // Added by the component
  // ... other SDK methods
}
```

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

### Load Stylesheet Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Shows how to load a CSS stylesheet dynamically by providing its ID, source URL, and specifying the type as 'style'.

```typescript
// Load a stylesheet
loadScriptOrStyle('my-styles', 'https://example.com/styles.css', 'style')
```

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

### Catch SetupPlayerError in Vue

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

Use this pattern to catch and log errors specifically related to the player's setup phase. Access `messageSecondary` for additional details provided during setup failures.

```typescript
import { SetupPlayerError } from '@byteark/byteark-player-vue'

const onPlayerSetupError = (error, originalError) => {
  if (error instanceof SetupPlayerError) {
    console.error('Player setup failed:', error.message)
    console.error('Details:', error.messageSecondary)
  }
}
```

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

### Define SetupPlayerError Class

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

Thrown when the player setup function itself encounters an error. This can occur due to custom setup logic failures, plugin issues, or timeouts.

```typescript
export class SetupPlayerError extends ByteArkPlayerContainerError {
  constructor(message: string, originalError: unknown, messageSecondary?: string);
}
```

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

### Vue Template Usage with TypeScript Setup

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/module-exports.md

Shows how to use the ByteArkPlayerContainer component within a Vue template and import necessary types for options in the script setup.

```vue
<template>
  <ByteArkPlayerContainer :options="playerOptions" />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = { ... }
</script>
```

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

### Configure Multiple Plugins Simultaneously

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Enable multiple plugins by listing them within the plugins object in player options. This example shows ads, lighthouse, volume booster, storyboard, and retention chart plugins.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL',
    lighthouse: { 
      user: { userId: 'user123' },
      video: { videoTitle: 'My Video' }
    }
  }],
  plugins: {
    // Ads
    bytearkAds: {
      ads: [
        { adTagUrl: 'https://example.com/pre.xml', time: 'pre' },
        { adTagUrl: 'https://example.com/post.xml', time: 'post' }
      ]
    },
    // Analytics
    bytearkLighthouse: {
      projectId: 'proj123'
    },
    // Enhancement
    bytearkVolumeBooster: {
      multiplier: 1.5
    },
    bytearkStoryboard: {
      autoDiscoverStoryboard: true
    },
    // Insights
    bytearkRetentionChart: {}
  }
}
```

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

### Usage Example of ByteArkPlayerContainer

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/module-exports.md

Demonstrates how to use the ByteArkPlayerContainer component in a Vue 3 application with basic player options.

```vue
<template>
  <ByteArkPlayerContainer :options="playerOptions" />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = {
  sources: [{ src: 'https://example.com/video.m3u8', type: 'application/x-mpegURL' }]
}
</script>
```

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

### Auto-detect Resource Type Example

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Illustrates loading a resource where the type ('script' or 'style') is automatically detected from the file extension in the URL.

```typescript
// Auto-detect type from URL
loadScriptOrStyle('resource', 'https://example.com/file.js', 'script')
```

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

### IOnPlayerSetupFunction Type

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Defines the signature for a callback function that is invoked upon the successful completion of the player setup process.

```typescript
type IOnPlayerSetupFunction = () => void;
```

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

### Install ByteArk Player Vue via Yarn

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/integration-guide.md

Install the ByteArk Player Vue component and its TypeScript types using Yarn. This is an alternative package manager for Node.js projects.

```bash
yarn add @byteark/byteark-player-vue @types/video.js
```

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

### Setup Player Options

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Detects autoplay capabilities and updates player options. It calls `window.bytearkPlayer.canAutoplay(options)` and adds the `autoplayResult_` field to the options. Throws `SetupPlayerOptionsError` if autoplay detection fails.

```typescript
export async function setupPlayerOptions(
  options: ByteArkPlayerOptions
): Promise<ByteArkPlayerOptions>;

```

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

### Control Player Instance with Callbacks

Source: https://github.com/byteark/byteark-player-vue/blob/main/README.md

Access the player instance from the onReady callback to control playback, volume, and other player states. This example demonstrates setting up various event listeners for player lifecycle and state changes.

```vue
<template>
  <ByteArkPlayerContainer
    @ready="onReady"
    @firstplay="onFirstPlay"
    @play="onPlay"
    @pause="onPause"
    @ended="onVideoEnded"
    @timeupdate="onTimeUpdated"
    @seeking="onVideoSeeking"
    @seeked="onVideoSeeked"
    @fullscreenchange="onToggleFullScreen"
    @volumechange="onVolumeChange"
    @ratechange="onPlaybackSpeedChanged"
    @enterpictureinpicture="onPIPEntered"
    @leavepictureinpicture="onPIPExited"
    :options="playerOptions" />
  <button @click="player.value?.play()">Play</button>
  <button @click="player.value?.pause()">Pause</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'

const playerRef = ref<ByteArkPlayer | null>(null)

const playerOptions: ByteArkPlayerOptions = {
  autoplay: 'any',
  fluid: true,
  aspectRatio: '16:9',
  poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
  sources: [{
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    title: 'Big Buck Bunny',
    videoId: 'TZyZheqEJUwC',
    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
  }]
}

const onReady = (player: ByteArkPlayer) => {
  // The player is ready! save player instance
  playerRef.value = player
}

const onFirstPlay = (player: ByteArkPlayer) => {
  // Do something...
}

const onPlay = (player: ByteArkPlayer, currentTime: number) => {
  // Do something...
}

const onPause = (player: ByteArkPlayer, currentTime: number) => {
  // Do something...
}

const onVideoEnded = () => {
  // Do something...
}

const onTimeUpdated = (player: ByteArkPlayer, currentTime: number) => {
  // Do something...
}

const onVideoSeeking = (player: ByteArkPlayer, currentTime: number) => {
  // Do something...
}

const onVideoSeeked = (player: ByteArkPlayer, currentTime: number) => {
  // Do something...
}

const onToggleFullScreen = (player: ByteArkPlayer, isFullscreen: boolean) => {
  // Do something...
}

const onVolumeChange = (player: ByteArkPlayer, volume: number) => {
  // Do something...
}

const onPlaybackSpeedChanged = (player: ByteArkPlayer, playbackSpeed: number) => {
  // Do something...
}

const onPIPEntered = (player: ByteArkPlayer,) => {
  // Do something...
}

const onPIPExited = (player: ByteArkPlayer,) => {
  // Do something...
}
</script>
```

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

### Install ByteArk Player Vue via PNPM

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/integration-guide.md

Install the ByteArk Player Vue component and its TypeScript types using PNPM. PNPM is a fast, disk-space-efficient package manager.

```bash
pnpm add @byteark/byteark-player-vue @types/video.js
```

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

### IOnPlayerSetupErrorFunction

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Callback function that is invoked when an error occurs during the player setup process.

```APIDOC
## IOnPlayerSetupErrorFunction

### Description
Callback on player setup error.

### Parameters
- `error` (ByteArkPlayerContainerError) - Required - The container error object
- `originalError` (ByteArkPlayerError | unknown) - Required - The original error that occurred during setup

### Returns
- void
```

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

### Minimal ByteArk Player Configuration

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/configuration.md

Use this snippet for basic player setup with a single video source. It requires defining player options and then passing them to the ByteArkPlayerContainer component.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL'
  }]
}

<ByteArkPlayerContainer :options="playerOptions" />
```

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

### ByteArk Player Vue Lazy Loading Setup

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-component.md

Shows how to configure the ByteArkPlayerContainer for lazy loading, where the player initializes only after user interaction with a placeholder.

```vue
<template>
  <ByteArkPlayerContainer
    :options="playerOptions"
    :lazyload="true"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = {
  autoplay: true,
  fluid: true,
  aspectRatio: '16:9',
  sources: [{ src: 'https://example.com/video.m3u8', type: 'application/x-mpegURL' }]
}

const onReady = (player: ByteArkPlayer) => {
  // Player ready - user clicked placeholder
}
</script>
```

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

### Peer Dependency Configuration

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/module-exports.md

Specifies the peer dependency on @types/video.js required for type checking. Install this dependency separately if needed.

```json
{
  "peerDependencies": {
    "@types/video.js": "^7.3.58"
  }
}
```

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

### Implementing Retry Logic for Player Errors

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

This example demonstrates how to implement a retry mechanism for player load errors. It allows a specified number of retries with increasing delays before marking the player as failed.

```vue
<template>
  <div>
    <ByteArkPlayerContainer
      v-if="!failed"
      :options="playerOptions"
      @loaderror="handleError"
    />
    <div v-else class="error-container">
      <p>{{ errorMessage }}</p>
      <button @click="retry">Retry</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ByteArkPlayerContainerError } from '@byteark/byteark-player-vue'

const failed = ref(false)
const errorMessage = ref('')
const retryCount = ref(0)
const maxRetries = 3

const handleError = (error: ByteArkPlayerContainerError) => {
  if (retryCount.value < maxRetries) {
    retryCount.value++
    console.log(`Retrying... attempt ${retryCount.value}`)
    setTimeout(() => {
      failed.value = false
    }, 1000 * retryCount.value)
  } else {
    failed.value = true
    errorMessage.value = `${error.message} - ${error.messageSecondary}`
  }
}

const retry = () => {
  retryCount.value = 0
  failed.value = false
}
</script>
```

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

### Define SetupPlayerOptionsError Class

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

Thrown when player options setup fails, often during autoplay capability detection. Use this to diagnose issues with player configuration or browser autoplay support.

```typescript
export class SetupPlayerOptionsError extends ByteArkPlayerContainerError {
  constructor(message: string, originalError: unknown, messageSecondary?: string);
}
```

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

### Error Handling for Resource Loading

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Provides an example of how to catch potential errors during script or style loading, such as network issues or 404 responses.

```typescript
loadScriptOrStyle('my-script', 'https://example.com/script.js', 'script')
  .catch(error => {
    console.error('Failed to load resource:', error)
    // Handle load error (network, 404, etc.)
  })
```

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

### Full Featured ByteArk Player Configuration

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/configuration.md

Configure advanced player features including playback, layout, media sources, UI elements, and plugins like ads and analytics. This example shows a comprehensive set of options.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  // Playback
  autoplay: 'muted',
  controls: true,
  playsinline: true,
  
  // Layout
  fluid: true,
  aspectRatio: '16:9',
  
  // Media
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL',
    title: 'My Video',
    videoId: 'vid123',
    poster: 'https://example.com/poster.jpg'
  }],
  poster: 'https://example.com/default-poster.jpg',
  
  // UI
  responsive: true,
  seekButtons: true,
  closedCaptionButton: true,
  
  // Plugins
  plugins: {
    bytearkLighthouse: {
      projectId: 'proj123',
      debug: false
    },
    bytearkAds: {
      adTagUrl: 'https://example.com/vast.xml',
      showAdMarker: true
    }
  }
}

const props = {
  options: playerOptions,
  customClass: 'my-player',
  playerVersion: 'v2'
}
```

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

### Player Window API Interface

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Defines the expected interface for the `window.bytearkPlayer` object, which is provided by the loaded ByteArk Player SDK. This includes methods for player initialization, setup, and querying browser support for DRM.

```typescript
window.bytearkPlayer = {
  canAutoplay(props: ByteArkPlayerOptions): Promise<AutoplayResult>;
  VIDEOJS_VERSION: string;
  VERSION: string;
  setup: ISetupPlayerFunction;
  init: ICreatePlayerFunction;
  initAsync?: ICreatePlayerFunction;
  isBrowserSupportDrm(): Promise<{ widevine: boolean; fairplay: boolean }>;
}
```

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

### ByteArk Player Vue Custom Player Functions

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-component.md

Illustrates how to provide custom functions for player creation and setup, allowing for advanced initialization logic.

```vue
<template>
  <ByteArkPlayerContainer
    :options="playerOptions"
    :createPlayerFunction="customCreatePlayer"
    :setupPlayerFunction="customSetupPlayer"
    @ready="onReady"
  />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { 
  ByteArkPlayerOptions, 
  ByteArkPlayer,
  ICreatePlayerFunction,
  ISetupPlayerFunction 
} from '@byteark/byteark-player-vue'

const customCreatePlayer: ICreatePlayerFunction = (node, options, onReady) => {
  // Custom player initialization logic
  const player = window.bytearkPlayer.init(node, options, onReady)
  return player
}

const customSetupPlayer: ISetupPlayerFunction = async (options, loadScriptOrStyle, customOptions) => {
  // Custom setup logic
  await window.bytearkPlayer.setup(options, loadScriptOrStyle, customOptions)
}

const onReady = (player: ByteArkPlayer) => {
  // Player is ready
}
</script>
```

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

### Global Error Handling in Vue Player

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

Implement a global error handler for player events like load errors, setup errors, and playback errors. This example shows how to catch specific error types and display user-friendly messages.

```vue
<template>
  <ByteArkPlayerContainer
    :options="playerOptions"
    @loaderror="handleLoadError"
    @setuperror="handleSetupError"
    @error="handlePlaybackError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import {
  LoadPlayerResourceError,
  SetupPlayerOptionsError,
  SetupPlayerError,
  CreatePlayerError,
  type ByteArkPlayerContainerError
} from '@byteark/byteark-player-vue'

const errorMessage = ref('')

const handleLoadError = (
  error: ByteArkPlayerContainerError,
  originalError: unknown
) => {
  console.error(`[${error.code}] ${error.message}`, originalError)
  errorMessage.value = error.messageSecondary

  if (error instanceof LoadPlayerResourceError) {
    // Retry loading resources
    console.log('Attempting to reload player resources...')
  }
}

const handleSetupError = (
  error: ByteArkPlayerContainerError,
  originalError: unknown
) => {
  console.error('Setup error:', error.message)
  errorMessage.value = 'Player setup failed. Please refresh the page.'
}

const handlePlaybackError = (player, error) => {
  console.error('Playback error:', error)
}
</script>
```

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

### Player Configuration with Single Plugin

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Set up the player with a single plugin, such as bytearkLighthouse. This demonstrates how to include just one plugin.

```typescript
// With single plugin
const playerOptions: ByteArkPlayerOptions = {
  sources: [...],
  plugins: {
    bytearkLighthouse: { projectId: 'proj123' }
  }
}
```

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

### ISetupPlayerFunction

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Function to set up the player before creation, allowing for loading plugins and initial configuration. It requires player options, a function to load scripts/styles, and optional custom options.

```APIDOC
## ISetupPlayerFunction

### Description
Function to setup player before creation (load plugins, configure).

### Parameters
- `options` (ByteArkPlayerOptions) - Required - Player configuration
- `loadScriptOrStyleFunction` (function) - Required - Function to load external scripts/stylesheets
- `customOptions` (object) - Optional - Additional custom options

### Returns
- Promise<void>
```

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

### Custom Error Messages for Player Setup

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

This TypeScript snippet shows how to provide custom error messages for specific player setup errors. It uses a mapping of error codes to user-friendly messages and displays them via a notification system.

```typescript
const customSetupFunction: ISetupPlayerFunction = async (
  options,
  loadScriptOrStyle,
  customOptions
) => {
  try {
    await window.bytearkPlayer.setup(options, loadScriptOrStyle, customOptions)
  } catch (error) {
    console.error('Custom setup failed:', error)
    throw error
  }
}

const playerProps = {
  options: playerOptions,
  setupPlayerFunction: customSetupFunction,
  onPlayerSetupError: (error, originalError) => {
    const displayMessage = getCustomErrorMessage(error.code)
    showErrorNotification({
      title: 'Player Setup Failed',
      message: displayMessage,
      details: error.messageSecondary
    })
  }
}

function getCustomErrorMessage(code: string): string {
  const messages: Record<string, string> = {
    'ERROR_BYTEARK_PLAYER_REACT_100001': 'Unable to download player. Check your connection.',
    'ERROR_BYTEARK_PLAYER_REACT_100002': 'Unable to detect playback capabilities.',
    'ERROR_BYTEARK_PLAYER_REACT_100003': 'Player configuration failed.',
    'ERROR_BYTEARK_PLAYER_REACT_100004': 'Unable to initialize player.'
  }
  return messages[code] || 'An error occurred'
}
```

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

### setupPlayerOptions

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Detects autoplay capabilities and updates player options. It calls `window.bytearkPlayer.canAutoplay(options)`, adds the `autoplayResult_` field to the options, and returns the updated options. Throws `SetupPlayerOptionsError` if autoplay detection fails.

```APIDOC
## setupPlayerOptions()

### Description
Detects autoplay capabilities and updates player options.

### Parameters
- **options** (ByteArkPlayerOptions) - Required - Player configuration object

### Returns
Promise<ByteArkPlayerOptions> - Promise resolving to updated options with autoplay detection result

### Throws
- SetupPlayerOptionsError: if autoplay detection fails
```

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

### Player Configuration with Multiple Plugins

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Configure the player to use multiple plugins simultaneously, such as bytearkLighthouse and bytearkAds. This shows a common scenario for extending player functionality.

```typescript
// With multiple plugins
const playerOptions: ByteArkPlayerOptions = {
  sources: [...],
  plugins: {
    bytearkLighthouse: { projectId: 'proj123' },
    bytearkAds: { adTagUrl: 'https://example.com/ads.xml' }
  }
}
```

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

### Configure ByteArk Lighthouse Plugin

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Specify the ByteArkLighthousePluginOptions when initializing the player.

```typescript
plugins: {
  bytearkLighthouse: ByteArkLighthousePluginOptions
}
```

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

### createPlayerInstance

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Creates a ByteArk Player instance from a media element. It validates the media element, attaches `isBrowserSupportDrm` to `window.bytearkPlayer`, calls the create function with the media element, options, and callback, and returns the player instance. Throws `CreatePlayerError` if creation fails.

```APIDOC
## createPlayerInstance()

### Description
Creates a ByteArk Player instance from a media element.

### Parameters
- **mediaElement** (HTMLMediaElement | null) - Required - Video/audio HTML element
- **options** (ByteArkPlayerOptions) - Required - Player configuration
- **createPlayerFunction** (ICreatePlayerFunction) - Required - Function to create player
- **onReady** (() => void) - Required - Callback when player ready

### Returns
Promise<ByteArkPlayer | null> - Promise resolving to ByteArkPlayer instance or null if mediaElement is null

### Throws
- CreatePlayerError: if creation fails
```

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

### Create ByteArk Player Instance

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Creates a ByteArk Player instance from a media element. It validates the media element, attaches `isBrowserSupportDrm` to `window.bytearkPlayer`, and calls the provided create function. Returns the player instance or null if the media element is null. Throws `CreatePlayerError` if creation fails.

```typescript
export async function createPlayerInstance(
  mediaElement: HTMLMediaElement | null,
  options: ByteArkPlayerOptions,
  createPlayerFunction: ICreatePlayerFunction,
  onReady: () => void
): Promise<ByteArkPlayer | null>;

```

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

### ByteArkPlayerContainerEvents Interface

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Defines the type signature for all events emitted by the ByteArkPlayerContainer. This includes events for player loading, setup, playback status, and user interactions.

```typescript
interface ByteArkPlayerContainerEvents {
  (e: 'loaded'): void;
  (e: 'loaderror', error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError | unknown): void;
  (e: 'setup'): void;
  (e: 'setuperror', error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError | unknown): void;
  (e: 'created', player: ByteArkPlayer): void;
  (e: 'ready', player: ByteArkPlayer): void;
  (e: 'firstplay', player: ByteArkPlayer): void;
  (e: 'play', player: ByteArkPlayer, currentTime: number): void;
  (e: 'pause', player: ByteArkPlayer, currentTime: number): void;
  (e: 'ended', player: ByteArkPlayer): void;
  (e: 'timeupdate', player: ByteArkPlayer, currentTime: number): void;
  (e: 'seeking', player: ByteArkPlayer, currentTime: number): void;
  (e: 'seeked', player: ByteArkPlayer, currentTime: number): void;
  (e: 'waiting', player: ByteArkPlayer): void;
  (e: 'stalled', player: ByteArkPlayer): void;
  (e: 'fullscreenchange', player: ByteArkPlayer, isFullscreen: boolean): void;
  (e: 'volumechange', player: ByteArkPlayer, volume: number): void;
  (e: 'ratechange', player: ByteArkPlayer, playbackSpeed: number): void;
  (e: 'enterpictureinpicture', player: ByteArkPlayer): void;
  (e: 'leavepictureinpicture', player: ByteArkPlayer): void;
  (e: 'error', player: ByteArkPlayer, error: ByteArkPlayerError | MediaError | unknown | null): void;
}
```

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

### Enable Fill Layout Mode

Source: https://github.com/byteark/byteark-player-vue/blob/main/README.md

To display videos within a fixed-sized container, set `fill: true` in the player options.

```javascript
playerOptions: {
  ...options,
  fill: true,
}
```

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

### Import ByteArk Player Vue Component

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/integration-guide.md

Import the ByteArkPlayerContainer component and its types into your Vue.js application. Ensure you are using a script setup block with TypeScript.

```vue
<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions } from '@byteark/byteark-player-vue'
</script>
```

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

### Configure ByteArk Lighthouse Analytics Plugin

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/configuration.md

Enable Lighthouse analytics by providing a required project ID. Optional settings include debug mode, playback stuck UI behavior, and the interval for checking playback stuck time.

```typescript
plugins: {
  bytearkLighthouse: {
    projectId: 'your-project-id',  // Required
    debug?: false,
    playbackStuckUi?: 'auto',  // 'auto', 'on', 'off'
    checkPlaybackStuckTimeInterval?: 5000
  }
}
```

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

### IOnPlayerSetupErrorFunction Type

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Defines the signature for a callback function that is invoked when an error occurs during the player setup process. It receives the container error and the original error.

```typescript
type IOnPlayerSetupErrorFunction = (
  error: ByteArkPlayerContainerError,
  originalError: ByteArkPlayerError | unknown,
) => void;
```

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

### Catch SetupPlayerOptionsError in Vue

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/errors.md

Implement this handler to specifically address failures during player options setup. This is useful for debugging autoplay issues or invalid configurations.

```typescript
import { SetupPlayerOptionsError } from '@byteark/byteark-player-vue'

const onPlayerLoadError = (error, originalError) => {
  if (error instanceof SetupPlayerOptionsError) {
    console.error('Failed to setup player options:', error.message)
  }
}
```

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

### Initialize VideoJS Plugins

Source: https://github.com/byteark/byteark-player-vue/blob/main/README.md

Integrate VideoJS plugins by calling their initialization methods within the player's onReady callback. Ensure the plugin is correctly imported or available in the scope.

```vue
<template>
  <ByteArkPlayerContainer
    @ready="onReady"
    :options="playerOptions"
  />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = {
  autoplay: 'any',
  fluid: true,
  aspectRatio: '16:9',
  poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
  sources: [{
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    title: 'Big Buck Bunny',
    videoId: 'TZyZheqEJUwC',
    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
  }]
}

const onReady = (player: ByteArkPlayer) => {
  // The player is ready! Initialize plugins here.
  player.somePlugin()
}
</script>
```

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

### Clear Player Resources

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/api-reference-utilities.md

Removes all ByteArk Player related script and link tags (identified by IDs starting with 'byteark-player-') from the document. This is useful for cleanup in SPAs.

```typescript
export function clearPlayerResources(): void;
```

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

### ISetupPlayerFunction Type

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/types.md

Defines the signature for the function used to set up the player, which includes loading plugins and configuring settings before player creation. It accepts player options, a script/style loading function, and optional custom options.

```typescript
type ISetupPlayerFunction = (
  options: ByteArkPlayerOptions,
  loadScriptOrStyleFunction: (id: string, url: string, type: 'script' | 'style') => Promise<void>,
  customOptions?: { [key: string]: unknown },
) => Promise<void>;
```

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

### Display a Video

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/INDEX.md

Configure player options with video source. Ensure the source URL is correct.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [{
    src: 'https://example.com/video.m3u8',
    type: 'application/x-mpegURL'
  }]
}
```

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

### Export Function Types

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/module-exports.md

Exports function signatures for player creation, setup, and various callback events. These types are essential for integrating custom logic or handling player lifecycle events in TypeScript.

```typescript
export type { 
  ICreatePlayerFunction,
  ISetupPlayerFunction,
  IOnPlayerCreatedFunction,
  IOnPlayerLoadedFunction,
  IOnPlayerLoadErrorFunction,
  IOnPlayerReadyFunction,
  IOnPlayerSetupFunction,
  IOnPlayerSetupErrorFunction,
} from './types'
```

```typescript
import type { ICreatePlayerFunction } from '@byteark/byteark-player-vue'

const customCreate: ICreatePlayerFunction = (node, options, onReady) => {
  return window.bytearkPlayer.init(node, options, onReady)
}
```

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

### Configure Analytics Plugin

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/INDEX.md

Integrate the ByteArk Lighthouse plugin for analytics by providing your project ID.

```typescript
plugins: {
  bytearkLighthouse: {
    projectId: 'your-project-id'
  }
}
```

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

### ByteArk Player Options

Source: https://github.com/byteark/byteark-player-vue/blob/main/README.md

Configuration options for creating a ByteArk Player instance. These options control aspects like autoplay, controls, video sources, and more.

```APIDOC
## ByteArk Player Options

You have to pass `options` object to `ByteArkPlayerContainer` in order to create ByteArk Player instance.

| Name         | Type           | Default | Description                                                                                                                       |
|--------------|----------------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
| autoplay     | Boolean/String | -       | Autoplay the video after the player is created. (Seee [VideoJS's autoplay options](https://videojs.com/guides/options/#autoplay)) |
| aspectRatio  | String         | -       | Use with fluid layout mode, to inform expected video's aspect ratio                                                               |
| controls     | Boolean        | true    | Show the controls bar.                                                                                                            |
| fill         | Boolean        | -       | Use fill layout mode.                                                                                                             |
| fluid        | Boolean        | -       | Use fluid layout mode.                                                                                                            |
| loop         | Boolean        | -       | Replay the video after ending                                                                                                     |
| muted        | Boolean        | -       | Play the video without sounds.                                                                                                    |
| playbackRate | Number         | 1.0     | Playback speed. 1.0 means original speed.                                                                                         |
| playsinline  | Boolean        | true    | Should be true so custom controls available on all platforms, including iOS.                                                      |
| poster       | String         | -       | Image to show before playing the video.                                                                                           |
| preload      | String         | -       | Preload the video before playing. (none / metadata / auto)                                                                        |
| responsive   | Boolean        | -       | Auto show/hide controls depending on the screen size.                                                                             |
| seekButtons  | Boolean        | -       | Show 10 seconds seek buttons and allow double-tap to seek on mobile.                                                              |
| sources      | Array          | -       | Array of video source object to be played. (See [Source Object](#source-object))                                                  |
| volume       | Number         | -       | Video's volume between 0 and 1.                                                                                                   |
| plugins      | Array          | -       | Videojs's plugins                                                                                                                 |

You can also use other props not listed here,
but appear as [VideoJS's options](https://videojs.com/guides/options/).
However, changing props will not effective after the player is created.
```

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

### Player Options with Plugins

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Configure various ByteArk Player plugins by passing them in the 'plugins' object within ByteArkPlayerOptions.

```typescript
const playerOptions: ByteArkPlayerOptions = {
  sources: [...],
  plugins: {
    bytearkLighthouse: { ... },
    bytearkAds: { ... },
    bytearkVolumeBooster: { ... },
    bytearkStoryboard: { ... },
    bytearkRetentionChart: { ... }
  }
}
```

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

### Configure Custom Plugin

Source: https://github.com/byteark/byteark-player-vue/blob/main/_autodocs/plugin-reference.md

Custom plugins are configured within the player's plugin settings. Provide the plugin name as a key and an object containing its specific configuration options.

```javascript
plugins: {
  myCustomPlugin: {
    // Your custom configuration
  }
}
```

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

### Request Media with Credentials

Source: https://github.com/byteark/byteark-player-vue/blob/main/README.md

Configure the player to include credentials in media requests, particularly useful for HLS streams requiring authentication. This is achieved by customizing the xhrSetup within the html5.hlsjs options.

```vue
<template>
  <ByteArkPlayerContainer
    :options="playerOptions"
  />
</template>

<script setup lang="ts">
import ByteArkPlayerContainer from '@byteark/byteark-player-vue'
import type { ByteArkPlayerOptions, ByteArkPlayer } from '@byteark/byteark-player-vue'

const playerOptions: ByteArkPlayerOptions = {
  autoplay: 'any',
  fluid: true,
  aspectRatio: '16:9',
  poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
  sources: [{
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    title: 'Big Buck Bunny',
    videoId: 'TZyZheqEJUwC',
    poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/K/7KPloVWgN.png',
  }],
  html5: {
    hlsjs: {
      xhrSetup: function(xhr, url) {
        xhr.withCredentials = true;
      },
    },
  },
}
</script>
```