### Installation

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Instructions for installing vlitejs via NPM or using a CDN.

```APIDOC
## Installation

### NPM

Install `vlitejs` in your project with the following command:

```bash
npm install vlitejs --save-dev
```

```bash
yarn add vlitejs --dev
```

### CDN

You can also download it and include it with a script tag as an ESM.

```html
<link href="https://cdn.jsdelivr.net/npm/vlitejs@6/dist/vlite.css" rel="stylesheet" crossorigin />
<script type="module">
  import Vlitejs from 'https://cdn.jsdelivr.net/npm/vlitejs@6';
</script>
```
```

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

### Build Example Assets

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Builds the necessary assets for vlitejs examples. Requires Node.js and npm.

```bash
npm run build && npm run build:example
```

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

### Install vlitejs with NPM

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Installs vlitejs as a development dependency using npm.

```bash
npm install vlitejs --save-dev
```

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

### Install vlitejs with Yarn

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Installs vlitejs as a development dependency using Yarn.

```bash
yarn add vlitejs --dev
```

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

### Initialize HLS Streaming with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This example demonstrates how to initialize a player for HLS streaming using vLitejs. It requires the HLS.js library and the HLS streaming functionality to be available.

```javascript
import Vlitejs from 'vlitejs';
// Assuming HLS.js is globally available or imported

new Vlitejs('#hls-player', {
  streaming: {
    enabled: true,
    type: 'hls'
  }
});
```

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

### Load YouTube Provider with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This example demonstrates how to load and use the YouTube provider with vLitejs. It requires the YouTube provider script and a YouTube video ID.

```javascript
import Vlitejs from 'vlitejs';
import 'vlitejs/dist/providers/youtube';

new Vlitejs('#youtube-player', {
  provider: 'youtube',
  videoId: 'some-video-id'
});
```

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

### Interact with vlitejs Player on Ready (mute)

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Shows how to use the 'onReady' callback function to interact with the vlitejs player instance once it is ready. This example mutes the player upon initialization.

```javascript
new Vlitejs('#player', {
  onReady: function (player) {
    player.mute();
  }
});
```

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

### IMA Plugin Usage

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/ima/README.md

Demonstrates how to register and use the IMA plugin with Vlitejs, including HTML setup and JavaScript configuration.

```APIDOC
## Vlitejs IMA Plugin Integration

### Description
This section covers the basic setup for using the Vlitejs IMA plugin, enabling Google IMA SDK ad integration.

### HTML Setup
Include a standard HTML5 video tag.

```html
<video id="player" src="<path_to_video_mp4>"></video>
```

### JavaScript Integration
Register the IMA plugin with Vlitejs and initialize the player. The `adTagUrl` is a required configuration option.

```js
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/ima.css';
import Vlitejs from 'vlitejs';
import VlitejsIma from 'vlitejs/plugins/ima.js';

Vlitejs.registerPlugin('ima', VlitejsIma, {
  adTagUrl: '<your_ad_tag_url>' // Required by Google IMA SDK
});

new Vlitejs('#player', {
  plugins: ['ima']
});
```

### Configuration Options
Customize the IMA plugin's behavior using the following optional parameters during plugin registration:

#### `adTagUrl` (String, Required)
Specify the ad tag URL for the ad server.

#### `adTimeout` (Number, Default: 5000)
Sets the timeout in milliseconds for ad loading before cancellation.

#### `adsRenderingSettings` (Object, Default: `{ restoreCustomPlaybackStateOnAdBreakComplete: true, enablePreloading: true, uiElements: ['adAttribution', 'countdown'] }`)
Allows customization of ad rendering. Refer to the [Google IMA AdsRenderingSettings](https://developers.google.com/interactive-media-ads/docs/sdks/html5-ads/client-side/reference/js/google.ima.AdsRenderingSettings) for detailed options.

#### `updateImaSettings` (Function, Default: `() => {}`)
A callback function to update IMA settings dynamically. The `imaSettings` object is passed as an argument.

#### `debug` (Boolean, Default: `false`)
Enables the debug version of the IMA SDK for troubleshooting.

### Events
The IMA plugin emits custom events that can be listened to for ad lifecycle monitoring:

- **`adsloader`**: Fired when the AdsLoader is initialized.
- **`adsrequest`**: Fired when the AdsRequest is initialized.
- **`adsmanager`**: Fired when the AdsManager is initialized.

Event data is available via the `event.detail` property.
```

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

### Declare Plugin Compatibility (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/README.md

This example shows how a plugin declares its compatibility with specific providers (e.g., 'html5') and media types (e.g., 'video'). This is crucial for vLitejs to correctly load and apply the plugin.

```javascript
class Subtitle {
  providers = ['html5']; // 'html5|youtube|vimeo'
  types = ['video']; // video|audio'
}
```

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

### Get Media Duration with vlitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This example shows how to retrieve the total duration of the media being played by vlitejs. It utilizes the `getDuration` method, which returns a Promise that resolves with the duration value. This is commonly used to display remaining time or to perform actions once the duration is known.

```javascript
new Vlitejs('#player', {
  onReady: (player) => {
    player.getDuration().then((duration) => {
      // The duration is available in the "duration" parameter
    });
  }
});
```

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

### HTML Video Element for AirPlay

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/airplay/README.md

Basic HTML5 video element setup required for the AirPlay plugin to target.

```html
<video id="player" src="<path_to_video_mp4>"></video>
```

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

### HTML5 Audio Tag for vlitejs

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/html5/README.md

Example of an HTML5 audio tag that can be used with the vlitejs player. Requires a valid path to the audio file.

```html
<audio id="player" src="<path_to_audio_mp3>"></audio>
```

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

### Listen to Play Event in vlitejs Player

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This snippet demonstrates how to attach an event listener to the 'play' event of a vlitejs player. It uses the `on` method to register a callback function that executes when the player starts playing. This is useful for triggering actions or tracking playback initiation.

```javascript
new Vlitejs('#player', {
  onReady: (player) => {
    player.on('play', () => {
      // The video starts playing
    });
  }
});
```

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

### Configure Cast Plugin with Subtitle Styles (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/cast/README.md

This code example shows how to register the Cast plugin with custom subtitle styling options. It allows for modification of properties like background color for text tracks, referencing the Google Cast TextTrackStyle API.

```javascript
Vlitejs.registerPlugin('cast', VlitejsCast, {
  textTrackStyle: {
    backgroundColor: '#21212190'
  }
});
```

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

### Initialization

Source: https://github.com/vlitejs/vlite/blob/main/README.md

How to import and initialize the vlitejs player.

```APIDOC
## Initialization

Import `vlitejs` style sheet and the JavaScript library as an ES6 modules.

```javascript
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
```

The `vlitejs` constructor accepts the following parameters:

| Arguments  |       Type       | Default | Description                                                      |
| ---------- | :--------------: | :-----: | ---------------------------------------------------------------- |
| `selector` | `String|HTMLElement` | `null`  | Unique CSS selector string or `HTMLElement` to target the player |
| `config`   |     `Object`     |  `{}`   | [Player configuration](#configuration) (optional)                |

Initialize the player with a CSS selector string.

```javascript
new Vlitejs('#player');
```

Or, initialize the player with an `HTMLElement`.

```javascript
new Vlitejs(document.querySelector('#player'));
```
```

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

### JavaScript Initialization for Youtube Provider

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/youtube/README.md

Shows how to register and use the Youtube provider with vlitejs. It includes importing necessary CSS and JS modules, registering the provider, and initializing the player.

```javascript
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsYoutube from 'vlitejs/providers/youtube.js';

Vlitejs.registerProvider('youtube', VlitejsYoutube);

new Vlitejs('#player', {
  provider: 'youtube'
});
```

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

### Initialize vlitejs Player with Configuration

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Initializes the vlitejs player with custom options, a ready callback, provider, and plugins.

```javascript
new Vlitejs('#player', {
  options: {},
  onReady: function (player) {},
  provider: 'html5',
  plugins: []
});
```

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

### JavaScript Initialization with Custom Hotkeys Configuration

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/hotkeys/README.md

Shows how to initialize the vlitejs player with the Hotkeys plugin, providing custom configurations for seek time and volume step. This allows for tailored shortcut behavior.

```js
Vlitejs.registerPlugin('hotkeys', VlitejsHotkeys, {
  seekTime: 3,
  volumeStep: 0.2
});
```

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

### JavaScript Initialization with Hotkeys Plugin

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/hotkeys/README.md

Demonstrates how to import and register the vlitejs Hotkeys plugin and then initialize the vlitejs player with the plugin enabled. Requires vlitejs and the hotkeys plugin CSS and JS files.

```js
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsHotkeys from 'vlitejs/plugins/hotkeys.js';

Vlitejs.registerPlugin('hotkeys', VlitejsHotkeys);

new Vlitejs('#player', {
  plugins: ['hotkeys']
});
```

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

### Initialize Dailymotion Player with vlitejs

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/dailymotion/README.md

Shows how to import necessary vlitejs components and register the Dailymotion provider. It requires a player ID obtained from the Dailymotion Partner Space and then initializes the vlitejs player for the specified HTML element.

```javascript
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsDailymotion from 'vlitejs/providers/dailymotion.js';

Vlitejs.registerProvider('dailymotion', VlitejsDailymotion, {
  playerId: '<player_id>' // Required by Dailymotion
});

new Vlitejs('#player', {
  provider: 'dailymotion'
});
```

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

### Initialize vlitejs with AirPlay Plugin (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/airplay/README.md

Demonstrates how to import necessary vlitejs and AirPlay plugin components and initialize the player with AirPlay support.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/airplay.css';
import Vlitejs from 'vlitejs';
import VlitejsAirPlay from 'vlitejs/plugins/airplay.js';

Vlitejs.registerPlugin('airplay', VlitejsAirPlay);

new Vlitejs('#player', {
  plugins: ['airplay']
});
```

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

### Sample Provider Structure for vlitejs

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/README.md

This JavaScript snippet demonstrates the basic structure for creating a custom vlitejs provider. It includes the essential 'init' function and a placeholder for extending the 'Player' class, which is crucial for integrating custom video sources.

```javascript
import Player from "../../player";

export default (Player) => {
  return class extends Player {
    static get providerName() {
      return "sample";
    }

    // Override methods here

    init() {
      // Initialization logic
    }

    // ... other methods like initPlayer, getCurrentTime, methodPlay etc.
  };
};
```

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

### Initialize Vimeo Player with vlitejs (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/vimeo/README.md

This snippet demonstrates how to register the Vimeo provider with vlitejs and initialize a Vimeo player instance. It requires importing the vlitejs core, the Vimeo provider, and the vlitejs CSS. The provider is registered, and then a new Vlitejs instance is created targeting a specific player element with the 'vimeo' provider option.

```javascript
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsVimeo from 'vlitejs/providers/vimeo.js';

Vlitejs.registerProvider('vimeo', VlitejsVimeo);

new Vlitejs('#player', {
  provider: 'vimeo'
});
```

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

### Configuration

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Details on the configuration options available for the vlitejs player.

```APIDOC
## Configuration

The second arguments of the constructor is an optional object with the following parameters:

| Arguments  |       Type       |  Default  | Description                                                          |
| ---------- | :--------------: | :-------: | -------------------------------------------------------------------- |
| `options`  |     `Object`     |   `{}`    | [Player options](#options)                                           |
| `onReady`  | `Function|null` |  `null`   | Callback function executed when the [player is ready](#player-ready) |
| `provider` |     `String`     | `'html5'` | [Player provider](./src/providers/README.md)                         |
| `plugins`  |     `Array`      |   `[]`    | [Player plugins](./src/plugins/README.md)                            |

```javascript
new Vlitejs('#player', {
  options: {},
  onReady: function (player) {},
  provider: 'html5',
  plugins: []
});
```
```

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

### Load Vimeo Provider with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This snippet illustrates how to initialize a Vimeo player using vLitejs. It necessitates the Vimeo provider script and the Vimeo video ID.

```javascript
import Vlitejs from 'vlitejs';
import 'vlitejs/dist/providers/vimeo';

new Vlitejs('#vimeo-player', {
  provider: 'vimeo',
  videoId: 'some-video-id'
});
```

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

### JavaScript Initialization with Sticky Plugin Configuration

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/sticky/README.md

JavaScript code demonstrating how to register the sticky plugin with custom configuration options. This allows control over the sticky mode, offset, width, and aspect ratio of the sticky player.

```javascript
Vlitejs.registerPlugin('sticky', VlitejsSticky, {
  mode: 'instant',
  offset: 20,
  width: 400,
  ratio: 16 / 9
});
```

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

### Initialize HTML5 Video Player with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This snippet demonstrates how to initialize a basic HTML5 video player using the vLitejs library. It requires an HTML video element and the vLitejs library to be included.

```javascript
import Vlitejs from 'vlitejs';

new Vlitejs('#my-player');
```

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

### Initialize HTML5 Audio Player with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This snippet shows how to initialize an HTML5 audio player using vLitejs. It targets an HTML audio element and assumes the vLitejs library is available.

```javascript
import Vlitejs from 'vlitejs';

new Vlitejs('#my-audio-player', {
  audio: true
});
```

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

### JavaScript Initialization with Picture-in-Picture Plugin

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/pip/README.md

This JavaScript code demonstrates how to import and register the Picture-in-Picture plugin with vlitejs, and then initialize the player with the plugin enabled. It requires importing the core vlitejs CSS and the plugin's CSS.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/pip.css';
import Vlitejs from 'vlitejs';
import VlitejsPip from 'vlitejs/plugins/pip.js';

Vlitejs.registerPlugin('pip', VlitejsPip);

new Vlitejs('#player', {
  plugins: ['pip']
});
```

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

### JavaScript Initialization with Sticky Plugin

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/sticky/README.md

JavaScript code to import necessary vlitejs modules, register the sticky plugin, and initialize the player with the sticky functionality enabled. It requires importing CSS files for vlitejs and the sticky plugin.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/sticky.css';
import Vlitejs from 'vlitejs';
import VlitejsSticky from 'vlitejs/plugins/sticky.js';

Vlitejs.registerPlugin('sticky', VlitejsSticky);

new Vlitejs('#player', {
  plugins: ['sticky']
});
```

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

### Enable Sticky Plugin with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This code shows how to enable the sticky plugin for a video player initialized with vLitejs. It requires the sticky plugin script to be loaded.

```javascript
import Vlitejs from 'vlitejs';
import 'vlitejs/dist/plugins/sticky';

new Vlitejs('#sticky-player', {
  plugins: ['sticky']
});
```

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

### Plugin API Overview

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/README.md

This section provides an overview of the vLitejs Plugin API, including available plugins, how to create custom plugins, and the rules and methods involved.

```APIDOC
## Plugin API

The vLitejs Plugin API allows developers to extend the capabilities of the vLitejs player by adding custom functionalities.

### Available Plugins

vLitejs supports several plugins that can be loaded on demand:

*   **Subtitle**: Supports multiple caption tracks (VTT).
*   **Picture-in-Picture**: Supports picture-in-picture mode.
*   **Volume bar**: Supports a volume bar.
*   **Cast**: Supports Google Cast API.
*   **AirPlay**: Supports Apple AirPlay API.
*   **Ima**: Supports Google IMA SDK.
*   **Sticky**: Supports sticky mode.
*   **Hotkeys**: Supports hotkeys for keyboard shortcuts.

### Creating a Custom Plugin

To create a custom plugin:

*   The plugin must be an ES6 JavaScript class.
*   The `init()` function is automatically called by `vLitejs` for plugin initialization.
*   The `onReady()` function is automatically called by `vLitejs` when the player is ready.

Refer to the [sample-plugin.js](https://github.com/vlitejs/vlite/blob/main/src/plugins/sample/sample-plugin.js) file for a starting point, or examine existing plugins like [subtitle.ts](https://github.com/vlitejs/vlite/blob/main/src/plugins/subtitle/subtitle.ts) and [pip.ts](https://github.com/vlitejs/vlite/blob/main/src/plugins/pip/pip.ts) for inspiration.

### Plugin Methods

| Method      | Parameters | Promise | Description                       |
| :---------- | :--------: | :-----: | :-------------------------------- |
| `init()`    |     -      |    -    | Initialize the plugin             |
| `onReady()` |     -      |    -    | Run code when the player is ready |

### Constructor Parameters

The plugin constructor receives the player instance, providing access to various player properties:

| Arguments             |      Type       | Description                                         |
| :-------------------- | :-------------: | :-------------------------------------------------- |
| `player.media`        |  `HTMLElement`  | Media element                                       |
| `player.elements`     |    `Objects`    | Player HTML elements                                |
| `player.options`      |    `Object`     | [Player options](../../README.md#Options)           |
| `player.isFullScreen` |    `Boolean`    | Is the player in fullscreen mode                    |
| `player.isMuted`      |    `Boolean`    | Is the player muted                                 |
| `player.isPaused`     | `null|Boolean` | Is the player paused (`null` before the first play) |
| `player.isTouch`      |    `Boolean`    | Is touch device                                     |
| `player.type`         |    `String`     | Player type (`video|audio`)                        |
| `player.plugins`      |    `Object`     | List of plugins instances                           |
| `player.Vlitejs`      |     `Class`     | `vLitejs` instance                                  |
| `player.controlBar`   |     `Class`     | `controlBar` instance                               |

### Provider and Media Declaration

Plugins must declare their compatibility with providers and media types using `providers` and `types` fields.

**Example (Subtitle plugin for HTML5 video):**

```js
class Subtitle {
  providers = ['html5']; // Compatible providers: 'html5', 'youtube', 'vimeo'
  types = ['video'];     // Compatible media types: 'video', 'audio'
}
```
```

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

### Initialize vlitejs Player (HTMLElement)

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Initializes the vlitejs player targeting a specific HTMLElement.

```javascript
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';

new Vlitejs(document.querySelector('#player'));
```

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

### Enable Hotkeys Plugin with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This snippet shows how to activate the hotkeys plugin for vLitejs players, allowing keyboard shortcuts for player controls. Ensure the hotkeys plugin script is loaded.

```javascript
import Vlitejs from 'vlitejs';
import 'vlitejs/dist/plugins/hotkeys';

new Vlitejs('#hotkeys-player', {
  plugins: ['hotkeys']
});
```

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

### Initialize vlitejs with Volume Bar Plugin (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/volume-bar/README.md

This snippet demonstrates how to import and register the vlitejs volume bar plugin and then initialize the player with this plugin enabled. It requires the vlitejs library and its CSS, as well as the volume bar plugin's CSS and JavaScript files.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/volume-bar.css';
import Vlitejs from 'vlitejs';
import VlitejsVolumeBar from 'vlitejs/plugins/volume-bar.js';

Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar);

new Vlitejs('#player', {
  plugins: ['volume-bar']
});
```

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

### JavaScript Usage for Subtitle Plugin

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/subtitle/README.md

Shows how to initialize the vlitejs player with the Subtitle plugin. This involves importing the necessary CSS and JS files, registering the plugin, and then instantiating the Vlitejs player with the 'subtitle' plugin enabled.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/subtitle.css';
import Vlitejs from 'vlitejs';
import VlitejsSubtitle from 'vlitejs/plugins/subtitle.js';

Vlitejs.registerPlugin('subtitle', VlitejsSubtitle);

new Vlitejs('#player', {
  plugins: ['subtitle']
});
```

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

### Provider API Overview

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/README.md

Overview of the Provider API for extending vLiteJS.

```APIDOC
## Provider API

The Provider API allows you to create custom video providers for vLiteJS.

### Available Providers

- **Youtube**: Supports YouTube player API.
- **Vimeo**: Supports Vimeo player SDK.
- **Dailymotion**: Supports Dailymotion player API.

### Creating a Custom Provider

To create a custom provider:

1.  Use the `sample-provider.js` file as a template.
2.  The provider file must return a function that accepts `Player` as a parameter.
3.  This function should return an ES6 JavaScript class extending the `Player` parameter.
4.  Ensure `vLitejs` is available before importing the provider.
5.  Do not rename or remove functions from `sample-provider.js` as `vLitejs` relies on them.
6.  The `init` function is called automatically by `vLitejs`.
7.  Call `super.onReady()` when the player is ready.

### Provider Methods

| Method                    | Parameters | Promise   | Description                                       |
| ------------------------- | :--------: | :-------: | ------------------------------------------------- |
| `init()`                  |     -      |     -     | Initialize the provider                           |
| `waitUntilVideoIsReady()` |     -      | `Promise` | Wait until the player is ready and the API loaded |
| `initPlayer()`            |     -      | `Promise` | Initialize the player                             |
| `getVolume()`             |     -      |     -     | Get the volume                                    |
| `getInstance()`           |     -      |     -     | Get the player instance                           |
| `getCurrentTime()`        |     -      | `Promise` | Get the current time                              |
| `getDuration()`           |     -      | `Promise` | Get the duration                                  |
| `methodPlay()`            |     -      |     -     | Method to play                                    |
| `methodPause()`           |     -      |     -     | Method to pause                                   |
| `methodMute()`            |     -      |     -     | Method to mute                                    |
| `methodUnMute()`          |     -      |     -     | Method to unmute                                  |
| `methodSeekTo(time)`      |  `Number`  |     -     | Method to seek to a current time in seconds       |
| `removeInstance()`        |     -      |     -     | Remove the player instance                        |

### API and Queue Handling

- Load the provider's API/SDK.
- If the API is available, call `initPlayer()`.
- If the API is not available, add the instance to the `providerQueue`.
- Process the queue to initialize players.
- Call `super.onReady()` after the player is ready.
```

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

### Handling Provider API Loading Queue in vlitejs

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/README.md

This JavaScript code illustrates how to manage the loading of external provider APIs and process an initialization queue. It covers scenarios where the API is immediately available or needs to be asynchronously loaded, ensuring proper player initialization.

```javascript
import Player from "../../player";
import { providerQueue } from "../queue";

const player = new Player({
  // ... player options
});

// If API is loaded
if (window.Vimeo) {
  player.initPlayer();
}
// If API is not loaded, push to queue
else {
  providerQueue.push(player);
}

// Call onReady when player is ready
player.onReady(() => {
  // ... ready state logic
});
```

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

### Vlite.js Methods

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Provides a set of methods to programmatically control the Vlite.js player instance, such as playback, volume, seeking, and fullscreen.

```APIDOC
## Vlite.js Methods

### Description

Control and query the state of the Vlite.js player instance.

### Methods Summary

- **play()**: Starts or resumes playback.
- **pause()**: Pauses the current playback.
- **setVolume(volume)**: Sets the player's volume. `volume` (Number, 0-1).
- **getVolume()**: Returns a Promise that resolves with the current volume.
- **getCurrentTime()**: Returns a Promise that resolves with the current playback time.
- **getDuration()**: Returns a Promise that resolves with the total duration of the media.
- **mute()**: Mutes the player's audio.
- **unMute()**: Unmutes the player's audio.
- **seekTo(time)**: Seeks to a specific time in the media. `time` (Number, seconds).
- **requestFullscreen()**: Enters fullscreen mode for the video player.
- **exitFullscreen()**: Exits fullscreen mode.
- **getInstance()**: Retrieves the player instance.
- **loading(isLoading)**: Sets or gets the loading indicator status. `isLoading` (Boolean).
- **on(event, callback)**: Adds an event listener. `event` (String), `callback` (Function).
- **off(event, callback)**: Removes an event listener. `event` (String), `callback` (Function).
- **destroy()**: Destroys the player instance and cleans up resources.

### Example Usage

```javascript
new Vlitejs('#player', {
  onReady: (player) => {
    player.getDuration().then((duration) => {
      console.log(`Media duration: ${duration} seconds`);
    });
  }
});
```
```

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

### Initialize vlitejs with HTML5 Provider

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/html5/README.md

JavaScript code to import and initialize the vlitejs player for an HTML5 audio or video element. The HTML5 provider is the default.

```javascript
import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';

new Vlitejs('#player');
```

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

### HTML Structure

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Defines the required HTML structure for different player types.

```APIDOC
## HTML Structure

### HTML5 video

```html
<video id="player" src="<path_to_video_mp4>"></video>
```

### HTML5 audio

```html
<audio id="player" src="<path_to_audio_mp3>"></audio>
```

### Youtube

```html
<div id="player" data-youtube-id="<video_id>"></div>
```

### Vimeo

```html
<div id="player" data-vimeo-id="<video_id>"></div>
```

### Dailymotion

```html
<div id="player" data-dailymotion-id="<video_id>"></div>
```
```

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

### Include vlitejs via CDN

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Includes vlitejs stylesheet and JavaScript library using CDN links for ES6 module usage.

```html
<link href="https://cdn.jsdelivr.net/npm/vlitejs@6/dist/vlite.css" rel="stylesheet" crossorigin />
<script type="module">
  import Vlitejs from 'https://cdn.jsdelivr.net/npm/vlitejs@6';
</script>
```

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

### Initialize vlitejs with IMA Plugin (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/ima/README.md

This snippet demonstrates how to register and use the IMA plugin with vlitejs. It requires importing the necessary CSS and JS files, registering the plugin with an ad tag URL, and then initializing the player with the 'ima' plugin enabled. The 'adTagUrl' is a mandatory configuration for the Google IMA SDK.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/ima.css';
import Vlitejs from 'vlitejs';
import VlitejsIma from 'vlitejs/plugins/ima.js';

Vlitejs.registerPlugin('ima', VlitejsIma, {
  adTagUrl: '<your_ad_tag_url>' // Required by Google IMA SDK
});

new Vlitejs('#player', {
  plugins: ['ima']
});
```

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

### Customize vlitejs Player Options (autoHide, poster)

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Demonstrates how to customize the vlitejs player by setting specific options like 'autoHide' and 'poster' during initialization. This is useful for controlling player behavior and appearance.

```javascript
new Vlitejs('#player', {
  options: {
    autoHide: true,
    poster: '/path/to/poster.jpg'
  }
});
```

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

### Initialize Vlitejs with Cast Plugin (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/cast/README.md

This snippet demonstrates how to import the necessary Vlitejs and Cast plugin modules, register the Cast plugin, and initialize a new Vlitejs player with the Cast plugin enabled.

```javascript
import 'vlitejs/vlite.css';
import 'vlitejs/plugins/cast.css';
import Vlitejs from 'vlitejs';
import VlitejsCast from 'vlitejs/plugins/cast.js';

Vlitejs.registerPlugin('cast', VlitejsCast);

new Vlitejs('#player', {
  plugins: ['cast']
});
```

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

### CSS for Sticky Screens

Source: https://github.com/vlitejs/vlite/blob/main/examples/html5-sticky/index.html

These CSS rules define the appearance and behavior of 'screens' which are intended to be used with vLitejs. They include styling for full viewport height, background colors, and pseudo-elements for numbering.

```css
.screen { width: 100%; height: 100vh; background-color: rgba(255 0 0 / 50%); font-size: 50px; display: flex; justify-content: center; align-items: center; position: relative; counter-increment: screenCounter; }
.screen::before { content: 'Screen ' counter(screenCounter); display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.screen.red { background-color: rgba(255 0 0 / 50%); }
.screen.green { background-color: rgba(0 255 0 / 50%); }
```

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

### Vlite.js Events

Source: https://github.com/vlitejs/vlite/blob/main/README.md

Vlite.js exposes several native events on its player element for monitoring playback status and changes.

```APIDOC
## Vlite.js Events

### Description

Listens for various playback-related events triggered by the Vlite.js player.

### Event Types

- **play**: Sent when playback starts or resumes.
- **pause**: Sent when playback is paused.
- **progress**: Sent periodically during media download to indicate progress.
- **timeupdate**: Sent whenever the current playback time changes.
- **volumechange**: Sent when the audio volume is adjusted.
- **enterfullscreen**: Sent when the video enters fullscreen mode (video only).
- **exitfullscreen**: Sent when the video exits fullscreen mode (video only).
- **ended**: Sent when the media playback has finished.

### Example Usage

```javascript
new Vlitejs('#player', {
  onReady: (player) => {
    player.on('play', () => {
      console.log('Video playback started!');
    });
  }
});
```
```

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

### HTML Structure for Youtube Video

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/youtube/README.md

Defines the HTML container for embedding a Youtube video. The `data-youtube-id` attribute is crucial for specifying which video to load.

```html
<div id="player" data-youtube-id="<video_id>"></div>
```

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

### Enable Picture-in-Picture Plugin with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This code enables the Picture-in-Picture (PiP) plugin for a vLitejs player. The PiP plugin script must be included.

```javascript
import Vlitejs from 'vlitejs';
import 'vlitejs/dist/plugins/pip';

new Vlitejs('#pip-player', {
  plugins: ['pip']
});
```

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

### Custom CSS Properties for vlitejs Player Design

Source: https://github.com/vlitejs/vlite/blob/main/README.md

These CSS custom properties can be used to customize the visual appearance of the vlitejs player. They are scoped locally under the `.v-vlite` selector. Users can modify properties like primary color, transition effects, control bar dimensions and background, and progress bar styling.

```css
.v-vlite {
  --vlite-colorPrimary: #ff7f15;
  --vlite-transition: 0.25s ease;
  --vlite-controlBarHeight: 50px;
  --vlite-controlBarHorizontalPadding: 10px;
  --vlite-controlBarBackground: linear-gradient(to top, #000 -50%, transparent);
  --vlite-controlsColor: #fff|#000;
  --vlite-controlsOpacity: 0.9;
  --vlite-progressBarHeight: 5px;
  --vlite-progressBarBackground: rgba(0 0 0 / 25%);
}
```

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

### Default Ads Rendering Settings (JSON)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/ima/README.md

This JSON object defines the default rendering settings for ads when using the IMA plugin. These settings control aspects like restoring playback state, enabling preloading, and specifying UI elements for ad breaks. This configuration can be customized via the `adsRenderingSettings` option during plugin registration.

```json
{
  "restoreCustomPlaybackStateOnAdBreakComplete": true,
  "enablePreloading": true,
  "uiElements": ["adAttribution", "countdown"]
}
```

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

### HTML Structure for Dailymotion Video

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/dailymotion/README.md

Defines the HTML element required to embed a Dailymotion video. The 'data-dailymotion-id' attribute must be populated with the video's unique identifier.

```html
<div id="player" data-dailymotion-id="<video_id>"></div>
```

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

### Enable Subtitles Plugin with vLitejs

Source: https://github.com/vlitejs/vlite/blob/main/README.md

This snippet demonstrates how to enable the subtitles plugin for a vLitejs player. It requires the subtitles plugin script and the appropriate track elements in the HTML.

```javascript
import Vlitejs from 'vlitejs';
import 'vlitejs/dist/plugins/subtitle';

new Vlitejs('#player-with-subtitles', {
  plugins: ['subtitle']
});
```

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

### HTML Usage for Subtitle Plugin

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/subtitle/README.md

Demonstrates how to include VTT subtitle tracks within the HTML video element for use with the vlitejs Subtitle plugin. It specifies the video source and multiple track sources with their respective languages.

```html
<video id="player" src="<path_to_video_mp4>">
  <track label="English" kind="subtitles" srclang="en" src="<path_to_subtitle_en.vtt>" default />
  <track label="French" kind="subtitles" srclang="fr" src="<path_to_subtitle_fr.vtt>" />
</video>
```

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

### Configure Cast Plugin with Media Metadata (JavaScript)

Source: https://github.com/vlitejs/vlite/blob/main/src/plugins/cast/README.md

This snippet illustrates how to register the Cast plugin with custom media metadata, including title and subtitle. It utilizes the Google Cast GenericMediaMetadata structure for describing the media being cast.

```javascript
Vlitejs.registerPlugin('cast', VlitejsCast, {
  metadata: {
    title: 'The Jungle Book',
    subtitle: 'Walt Disney Animation Studios'
  }
});
```

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

### Vimeo Player HTML Structure

Source: https://github.com/vlitejs/vlite/blob/main/src/providers/vimeo/README.md

This HTML snippet shows the basic structure required to embed a Vimeo video using the vlitejs player. A div element with a unique ID and a data-vimeo-id attribute containing the Vimeo video ID is used.

```html
<div id="player" data-vimeo-id="<video_id>"></div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.