### Create Embed from Scratch and Get Volume

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Initialize a player instance for a new embed and retrieve the current volume level. This example demonstrates asynchronous operations using Promises.

```javascript
const player = new Vimeo.Player('container', {
  id: 76979871,
  width: 640,
  height: 360
});

player.getVolume().then(volume => {
  console.log('Current volume:', volume);
});
```

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

### Install Vimeo Player.js via NPM

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Use this command to install the Vimeo Player.js library using NPM.

```bash
npm install @vimeo/player
```

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

### Example Chapter Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a VimeoChapter object, defining chapter title and start time.

```json
{
  "id": "chapter-1",
  "title": "Introduction",
  "startTime": 0
}
```

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

### Get All Chapters

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Retrieves all chapters associated with the video. Each chapter object includes its start time, title, and index.

```javascript
player.getChapters().then((chapters) => {
  chapters.forEach(chapter => {
    console.log(`${chapter.index}. ${chapter.title} @ ${chapter.startTime}s`);
  });
});
```

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

### Install timing-object Package

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/timing-src-connector.md

Install the timing-object package using npm to enable timing object features.

```bash
npm install timing-object
```

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

### Listen for Buffer Start

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/events-reference.md

Use this to detect when the player begins buffering, such as at the start of preloading or during seeking. No associated event data is provided.

```javascript
player.on('bufferstart', () => {
  console.log('Buffering...');
  loadingIndicator.show();
});
```

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

### Start Playback at Specific Chapter

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Use `chapter_id` to specify the starting chapter for playback. Ensure the provided ID is valid.

```javascript
{ chapter_id: 'chapter-123abc' }
```

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

### Start Remote Playback Session

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Initiate a remote playback session using ` செலுtoRemotePlayback()`. This method returns a Promise.

```javascript
player. செலுtoRemotePlayback().then(function(session) {
    // session is the remote playback session object
});
```

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

### Get Video Chapters

Source: https://github.com/vimeo/player.js/blob/master/README.md

Fetches an array of chapter objects for the video. Each object contains the start time, title, and index of a chapter.

```javascript
player.getChapters().then(function(chapters) {
    // chapters = an array of chapters objects
}).catch(function(error) {
    // an error occurred
});
```

```javascript
{
    "startTime": 15,
    "title": "Chapter Title",
    "index": 1
}
```

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

### timeupdate Event Example

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/types.md

Logs the current playback progress and time to the console when the 'timeupdate' event fires. This example demonstrates how to access data from the VimeoEvent interface.

```javascript
player.on('timeupdate', (data) => {
  console.log(`${data.percent * 100}% through (${data.seconds}/${data.duration})`);
});
```

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

### Bufferstart Event

Source: https://github.com/vimeo/player.js/blob/master/README.md

Triggered when buffering starts in the player. This event also fires during preload and seeking. No associated data is provided.

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

### Enable Responsive Player

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Set `responsive` to `true` to make the player scale with its container. Example: `// Player scales with container`.

```javascript
{ responsive: true }  // Player scales with container
```

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

### UnsupportedError Example

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/errors-reference.md

This error indicates that a feature, such as cue points, is not compatible with the current browser or player configuration.

```javascript
Message: "Cue points are not supported with the current player or browser."
```

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

### Example Quality Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a VimeoQuality object, representing an available video quality option.

```json
{
  "id": "240p",
  "width": 426,
  "height": 240
}
```

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

### Set Playback Start Time

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Configure the player to begin playback at a specific second. This is useful for playing segments of a video.

```javascript
{ start_time: 30 }  // Start at 30 seconds
```

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

### Get Video Chapters

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Retrieve the list of chapters for the video using `getChapters()`. This method returns a Promise.

```javascript
player.getChapters().then(function(chapters) {
    // chapters is an array of VimeoChapter objects
    console.log(chapters);
});
```

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

### Initialize Player with Constructor Options

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Use this method to configure player settings like video ID, dimensions, and playback behavior when creating a new Player instance.

```javascript
const player = new Vimeo.Player('container', {
  id: 76979871,
  width: 640,
  height: 360,
  autoplay: true,
  controls: true,
  color: '00adef'
});
```

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

### Example Camera Properties Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a CameraProperties object, used for controlling 360° video camera angles.

```json
{
  "yaw": 0,
  "pitch": 0,
  "roll": 0
}
```

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

### getSeekable

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Gets the time ranges that can be seeked to. Returns an array of objects, each representing a seekable range with 'start' and 'end' properties.

```APIDOC
## getSeekable(): Promise<TimeRange[]>

### Description
Gets the time ranges that can be seeked to.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
None

### Request Example
```javascript
player.getSeekable().then((ranges) => {
  console.log('Video is seekable:', ranges);
});
```

### Response
#### Success Response (200)
- **ranges** (TimeRange[]) - An array of {start, end} objects representing seekable ranges.
```

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

### Core Utility Methods

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Essential methods for player initialization, loading, and cleanup.

```APIDOC
## Core Utilities

### `ready()`

**Purpose:** Returns a Promise that resolves when the player is ready to be controlled.

### `loadVideo(video)`

**Purpose:** Loads a new video into the player.

**Parameters:**
- **video** (object or number) - Can be a video ID, a URL, or an object with video details.

### `unload()`

**Purpose:** Resets the player to its initial state, unloading the current video.

### `destroy()`

**Purpose:** Cleans up the player instance and removes it from the DOM.

### `setTimingSrc(timingObject)`

**Purpose:** Synchronizes the player with a Timing Object.

**Parameters:**
- **timingObject** (object) - The Timing Object to synchronize with.

### `on(event, listener)`

**Purpose:** Adds an event listener for player events.

**Parameters:**
- **event** (string) - The name of the event to listen for.
- **listener** (function) - The callback function to execute when the event fires.

### `off(event, listener)`

**Purpose:** Removes an event listener.

**Parameters:**
- **event** (string) - The name of the event to remove the listener from.
- **listener** (function, optional) - The specific listener function to remove. If omitted, all listeners for the event are removed.
```

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

### Example Audio Track Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a VimeoAudioTrack object, detailing audio track properties like language and ID.

```json
{
  "id": "en",
  "language": "English",
  "label": "English"
}
```

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

### getPlayed

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Gets the time ranges that have been played. Returns an array of objects, each representing a played range with 'start' and 'end' properties.

```APIDOC
## getPlayed(): Promise<TimeRange[]>

### Description
Gets the time ranges that have been played.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
None

### Request Example
```javascript
player.getPlayed().then((ranges) => {
  ranges.forEach(range => {
    console.log(`Played from ${range.start}s to ${range.end}s`);
  });
});
```

### Response
#### Success Response (200)
- **ranges** (TimeRange[]) - An array of {start, end} objects representing played ranges.
```

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

### Get Video Duration and Play

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Retrieve the video's duration before starting playback. Useful for pre-loading or displaying duration information.

```javascript
player.getDuration().then((duration) => {
  console.log(`Duration: ${duration}s`);
  player.play();
});
```

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

### Player Initialization with Module Bundlers

Source: https://github.com/vimeo/player.js/blob/master/README.md

Demonstrates how to import and initialize the Player constructor when using module bundlers like webpack or rollup, or with RequireJS.

```APIDOC
## Player Initialization with Module Bundlers

If you’re using a module bundler like [webpack](https://webpack.js.org/) or [rollup](https://rollup.js.org/), the exported object will be the Player constructor.

```javascript
import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});
```

Similarly, if you’re using [RequireJS](https://requirejs.org/) in the browser, it will also import the Player constructor directly:

```html
<iframe src="https://player.vimeo.com/video/76979871?h=8272103f6e" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script>
    require(['https://player.vimeo.com/api/player.js'], function (Player) {
        const iframe = document.querySelector('iframe');
        const player = new Player(iframe);

        player.on('play', function() {
            console.log('played the video!');
        });
    });
</script>
```
```

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

### Initialize Player with Browser Global

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Include the player.js script and then initialize a new Vimeo.Player instance using the global Vimeo object.

```html
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  const player = new Vimeo.Player('container', {
    id: 76979871
  });
</script>
```

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

### Get Video Width

Source: https://github.com/vimeo/player.js/blob/master/README.md

Fetches the native width of the video. It uses the highest available resolution before playback starts. Includes error handling.

```javascript
player.getVideoWidth().then(function(width) {
    // width = the width of the video that is currently playing
}).catch(function(error) {
    // an error occurred
});
```

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

### playing

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/events-reference.md

Fires when the video actually starts playing after any necessary buffering. It provides similar event data to the 'play' event.

```APIDOC
## playing

### Description
Triggered when the video actually starts playing (after buffering, if necessary).

### Event Data
- **duration** (number) - Total video duration in seconds
- **percent** (number) - Progress (0–1)
- **seconds** (number) - Current time in seconds

### Notes
- Similar to `play` but fires after any buffering is complete.
- May not fire if the video is already playing when the event listener is added.

### Usage
```javascript
player.on('playing', (data) => {
  console.log('Video is playing');
});
```
```

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

### Get Audio Tracks

Source: https://github.com/vimeo/player.js/blob/master/README.md

Fetches an array of audio tracks available for the video. Includes error handling for the Promise.

```javascript
player.getAudioTracks().then(function(tracks) {
    // tracks = an array of track objects
}).catch(function(error) {
    // an error occurred
});
```

```javascript
{
    "label": "English",
    "language": "en",
    "kind": "main",
    "provenance": "PROVENANCE_USER_UPLOADED",
    "enabled": true,
}
```

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

### Initialize Player with Embed Options

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/types.md

Shows how to create a new Vimeo player instance with a comprehensive set of embed options, including dimensions, playback controls, and information display.

```javascript
const options = {
  id: 76979871,
  width: 640,
  height: 360,
  autoplay: true,
  controls: true,
  color: '00adef',
  title: true,
  byline: false,
  portrait: false,
  loop: false,
  muted: false
};

const player = new Vimeo.Player('container', options);
```

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

### Load Video with Different Options

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/types.md

Demonstrates how to load a video using a simple ID, a URL, or an options object with specific playback settings.

```javascript
// Simple ID
player.loadVideo(76979871);
```

```javascript
// Simple URL
player.loadVideo('https://vimeo.com/76979871');
```

```javascript
// With options
player.loadVideo({
  id: 76979871,
  autoplay: true,
  byline: false
});
```

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

### Handle Privacy Error for Video URL Retrieval

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/errors-reference.md

Catch `PrivacyError` when attempting to get the URL of a video that is private or whose URL is not available due to privacy settings. The example logs a message indicating the URL is unavailable.

```javascript
player.getVideoUrl()
  .catch((error) => {
    if (error.name === 'PrivacyError') {
      console.error('Video URL not available');
    }
  });
```

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

### bufferstart

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/events-reference.md

Fires when the player begins the buffering process, indicating that content is being loaded. This event does not carry any specific data.

```APIDOC
## bufferstart

### Description
Triggered when the player begins buffering.

### Event Data
No data object (or empty)

### Usage
```javascript
player.on('bufferstart', () => {
  console.log('Buffering...');
  loadingIndicator.show();
});
```
```

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

### Example Cue Point Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a VimeoTextTrackCuePoint object, representing an individual caption cue with text and time data.

```json
{
  "text": "Hello, world!",
  "startTime": 5.5,
  "endTime": 10.0
}
```

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

### ready(): Promise<void>

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Returns a promise that resolves when the player iframe has initialized. This method can be called before other methods or event listeners are added.

```APIDOC
## ready()

### Description
Returns a promise that resolves when the player iframe has initialized.

### Method
`ready()`

### Parameters
None

### Returns
`Promise<void>` — Resolves when the player is ready, rejects if the player is unloaded.

### Usage Example
```javascript
player.ready().then(() => {
  console.log('Player is ready');
}).catch((error) => {
  console.error('Player failed to initialize:', error);
});

// No need to await ready before calling other methods
player.on('play', () => {});
player.getVolume().then(vol => console.log(vol));
```

### Notes
- You do not need to wait for this promise before calling other methods or adding event listeners.
- The ready promise rejects if called on a destroyed or unloaded player.
```

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

### Promotional Player Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Set up a player for promotional use with autoplay, muted audio, looping, and minimal branding. Note that `muted` is often required for sound-on autoplay.

```javascript
const options = {
  id: 76979871,
  autoplay: true,
  muted: true,          // Required for sound-on autoplay on some browsers
  loop: true,
  byline: false,
  portrait: false,
  title: false,
  controls: true,
  background: true      // Minimal controls
};
const player = new Vimeo.Player('container', options);
```

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

### Initialize Vimeo Player

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Create a new Vimeo Player instance by targeting an HTML element and providing a video source.

```javascript
const player = new Player('my-video-element', {
    id: 19231868,
    url: 'https://vimeo.com/19231868'
});
```

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

### RangeError Example

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/errors-reference.md

This error occurs when a numerical value is outside its allowed range. For example, setting the player volume outside of 0 to 1.

```javascript
Message: "The volume must be between 0 and 1."
```

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

### Minimal Player Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Initialize a basic Vimeo player with essential options like video ID and controls.

```javascript
const options = {
  id: 76979871,
  controls: true
};
const player = new Vimeo.Player('container', options);
```

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

### getSeeking

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Gets whether the player is currently seeking.

```APIDOC
## getSeeking(): Promise<boolean>

### Description
Gets whether the player is currently seeking.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
None

### Request Example
```javascript
player.getSeeking().then((seeking) => {
  console.log('Is seeking:', seeking);
});
```

### Response
#### Success Response (200)
- **seeking** (boolean) - True if player is seeking, false otherwise.
```

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

### Initialize Player with RequireJS

Source: https://github.com/vimeo/player.js/blob/master/README.md

Use this approach for browser-based projects utilizing RequireJS to load the Vimeo Player API.

```html
<iframe src="https://player.vimeo.com/video/76979871?h=8272103f6e" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script>
    require(['https://player.vimeo.com/api/player.js'], function (Player) {
        const iframe = document.querySelector('iframe');
        const player = new Player(iframe);

        player.on('play', function() {
            console.log('played the video!');
        });
    });
</script>
```

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

### Import and Initialize Player with Module Bundler

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Import the Player class and initialize a new player instance when using a module bundler.

```javascript
import Player from '@vimeo/player';

const player = new Player('container', {
  id: 76979871,
  width: 640
});
```

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

### getCurrentTime

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Gets the current playback position in seconds.

```APIDOC
## getCurrentTime(): Promise<number>

### Description
Gets the current playback position in seconds.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
None

### Request Example
```javascript
player.getCurrentTime().then((seconds) => {
  console.log('Current position:', seconds);
});
```

### Response
#### Success Response (200)
- **seconds** (number) - The current time in seconds.
```

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

### Get paused state

Source: https://github.com/vimeo/player.js/blob/master/README.md

Checks if the player is currently paused.

```js
player.getPaused().then(function(paused) {
    // paused = whether or not the player is paused
}).catch(function(error) {
    // an error occurred
});
```

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

### Educational Player Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Set up a player for educational content, enabling features like captions, transcripts, and chapters to enhance learning. This configuration supports a more interactive and informative viewing experience.

```html
<iframe src="https://player.vimeo.com/video/76979871?h=1234567890&cc_load_policy=1&cc_lang_pref=en&transcript=1&chapters=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
```

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

### Get ended state

Source: https://github.com/vimeo/player.js/blob/master/README.md

Checks if the video has finished playing.

```js
player.getEnded().then(function(ended) {
    // ended = whether or not the video has ended
}).catch(function(error) {
    // an error occurred
});
```

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

### Promotional/Marketing Player Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Configure a player for promotional or marketing purposes, often involving autoplay, muted playback, and a focus on visual appeal. This setup is ideal for grabbing attention.

```html
<iframe src="https://player.vimeo.com/video/76979871?h=1234567890&autoplay=1&loop=1&autopause=0&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
```

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

### Color Management

Source: https://github.com/vimeo/player.js/blob/master/README.md

Methods for getting and setting player colors.

```APIDOC
## getColor()

### Description
Get the accent color for this player. Note that this is deprecated in place of `getColors`.

### Method
GET

### Endpoint
player.getColor()

### Response
#### Success Response (200)
- **color** (string) - The hex color of the player.

### Example
```javascript
player.getColor().then(function(color) {
    // color = the hex color of the player
}).catch(function(error) {
    // an error occurred
});
```
```

```APIDOC
## getColors()

### Description
Get all colors used for this player. The return value is an array of primary, accent, text/icon, and background.

### Method
GET

### Endpoint
player.getColors()

### Response
#### Success Response (200)
- **colors** (string[]) - An array of hex color strings: [primary, accent, text/icon, background].

### Example
```javascript
player.getColors().then(function(colors) {
    // colors = [primary, accent, text/icon, background]
}).catch(function(error) {
    // an error occurred
});
```
```

```APIDOC
## setColor(color: string)

### Description
Set the accent color of this player to a hex or rgb string. Setting the color may fail if the owner of the video has set their embed preferences to force a specific color. Note that this setter is deprecated and should be replaced with `setColors`.

### Method
POST

### Endpoint
player.setColor(color: string)

### Parameters
#### Path Parameters
- **color** (string) - Required - The hex or rgb color string to set.

### Request Example
```javascript
player.setColor('#00adef');
```

### Response
#### Success Response (200)
- **color** (string) - The hex color of the player if successfully set.

#### Error Response
- **TypeError**: The string was not a valid hex or rgb color.
- **EmbedSettingsError**: The owner of the video has chosen to use a specific color.

### Example
```javascript
player.setColor('#00adef').then(function(color) {
    // color was successfully set
}).catch(function(error) {
    switch (error.name) {
        case 'TypeError':
            // the string was not a valid hex or rgb color
            break;
        case 'EmbedSettingsError':
            // the owner of the video has chosen to use a specific color
            break;
        default:
            // some other error occurred
            break;
    }
});
```
```

```APIDOC
## setColors(colors: string[])

### Description
Set all colors of this player with an array of hex values. Setting the color may fail if the owner of the video has set their embed preferences to force a specific color.

### Method
POST

### Endpoint
player.setColors(colors: string[])

### Parameters
#### Path Parameters
- **colors** (string[]) - Required - An array of hex color strings: [primary, accent, text/icon, background].

### Request Example
```javascript
player.setColors(['abc', 'def', '123', '456']);
```

### Response
#### Success Response (200)
- **colors** (string[]) - The array of colors that were successfully set.

#### Error Response
- **TypeError**: One or more strings in the array were not valid hex or rgb colors.
- **EmbedSettingsError**: The owner of the video has chosen to use a specific color.

### Example
```javascript
player.setColors(['abc', 'def', '123', '456']).then(function(color) {
    // colors were successfully set
    // Array order: [primary, accent, text/icon, background]
}).catch(function(error) {
    switch (error.name) {
        case 'TypeError':
            // the string was not a valid hex or rgb color
            break;
        case 'EmbedSettingsError':
            // the owner of the video has chosen to use a specific color
            break;
        default:
            // some other error occurred
            break;
    }
});
```
```

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

### Get Current Quality

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the currently selected video quality.

```js
player.getQuality().then(function(quality) {
    // quality = the current selected quality
}).catch(function(error) {
    // an error occurred
});
```

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

### Instantiate Player Class

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Examples of how to instantiate the Player class. You can attach it to an existing iframe, create a player within a specified div with embed options, or use a string selector for the container element.

```javascript
const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);
```

```javascript
const player = new Vimeo.Player('player-container', {
  id: 76979871,
  width: 640,
  height: 360
});
```

```javascript
const player = new Vimeo.Player('my-player-div');
```

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

### Get seeking state

Source: https://github.com/vimeo/player.js/blob/master/README.md

Checks if the player is currently in the process of seeking.

```js
player.getSeeking().then(function(seeking) {
    // seeking = whether the player is seeking or not
}).catch(function(error) {
    // an error occurred
});
```

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

### Load Video with Specific Options

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Use this method to load a new video into an existing player instance with specific configuration options.

```javascript
player.loadVideo({
  id: 76979871,
  autoplay: true,
  byline: false
});
```

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

### Get played time ranges

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the time ranges that have been played.

```js
player.getPlayed().then(function(played) {
    // played = array values of the played video time ranges.
}).catch(function(error) {
    // an error occurred
});
```

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

### Get muted state

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the current mute status of the player.

```js
player.getMuted().then(function(muted) {
    // muted = whether muted is turned on or not
}).catch(function(error) {
    // an error occurred
});
```

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

### Initialize Player with Module Bundler

Source: https://github.com/vimeo/player.js/blob/master/README.md

Use this approach when working with module bundlers like webpack or rollup where the Player constructor is the default export.

```js
import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});
```

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

### Get loop state

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the current loop configuration of the player.

```js
player.getLoop().then(function(loop) {
    // loop = whether loop is turned on or not
}).catch(function(error) {
    // an error occurred
});
```

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

### Get video duration

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the total duration of the video in seconds.

```js
player.getDuration().then(function(duration) {
    // duration = the duration of the video in seconds
}).catch(function(error) {
    // an error occurred
});
```

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

### Color Methods

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Methods for getting and setting the player's accent color.

```APIDOC
## Colors

### `getColor()`

**Purpose:** Get the current accent color of the player.

**Returns:**
- (string) - The accent color in hexadecimal format.

### `setColor(color)`

**Purpose:** Set the accent color of the player.

**Parameters:**
- **color** (string) - The desired accent color in hexadecimal format.

### `getColors()`

**Purpose:** Get all available color settings for the player.

**Returns:**
- (object) - An object containing various color settings.

### `setColors(colors)`

**Purpose:** Set multiple color settings for the player.

**Parameters:**
- **colors** (object) - An object containing the color settings to apply.
```

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

### Volume Control API

Source: https://github.com/vimeo/player.js/blob/master/README.md

Methods for getting and setting the player's volume.

```APIDOC
## GET /player/volume

### Description
Get the current volume level of the player on a scale from `0` to `1`.
Most mobile devices do not support an independent volume from the system volume. In those cases, this method will always return `1`.

### Method
GET

### Endpoint
`/player/volume`

### Response
#### Success Response (200)
- **volume** (number) - The current volume level of the player (0 to 1).

### Response Example
```json
{
  "volume": 0.5
}
```

## POST /player/volume

### Description
Set the volume of the player on a scale from `0` to `1`. When set via the API, the volume level will not be synchronized to other players or stored as the viewer’s preference.
Most mobile devices (including iOS and Android) do not support setting the volume because the volume is controlled at the system level. An error will *not* be triggered in that situation.

### Method
POST

### Endpoint
`/player/volume`

### Parameters
#### Request Body
- **volume** (number) - Required - The desired volume level (0 to 1).

### Request Example
```json
{
  "volume": 0.5
}
```

### Response
#### Success Response (200)
- **volume** (number) - The volume level that was set.

#### Response Example
```json
{
  "volume": 0.5
}
```
```

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

### Player Constructor

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Initializes a new Vimeo Player instance. This is the primary way to interact with the Vimeo player API programmatically.

```APIDOC
## Player Constructor

### Description
Initializes a new Vimeo Player instance. This is the primary way to interact with the Vimeo player API programmatically.

### Parameters

#### Element
- **element** (HTMLIFrameElement | HTMLElement | string | jQuery) - Required - Reference to an existing Vimeo iframe, a DOM element to inject the player into, an element's id string, or a jQuery object. If the element is not an iframe, the constructor will create one inside it.

#### Options
- **options** (VimeoEmbedParameters) - Optional - Embed options for creating a new player. Only used if `element` is not already an iframe.

### Returns
A `Player` instance that can be used to control the embedded Vimeo player.

### Throws
- **TypeError**: `element` is not a valid DOM element or valid id string
- **Error**: `element` is an iframe with a non-Vimeo src URL

### Usage Example
```javascript
// Attach to existing iframe
const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);

// Create player in a div
const player = new Vimeo.Player('player-container', {
  id: 76979871,
  width: 640,
  height: 360
});

// Using a string selector
const player = new Vimeo.Player('my-player-div');
```

### Notes
- If a Player object is already associated with the element, the existing Player instance is returned (singleton pattern per element).
- jQuery objects with multiple elements will use only the first element, with a warning to console.
- The `ready()` promise does not need to be awaited before calling methods or adding event listeners.
```

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

### Get seekable time ranges

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the time ranges that the user can seek to.

```js
player.getSeekable().then(function(seekable) {
    // seekable = array values of the seekable video time ranges.
}).catch(function(error) {
    // an error occurred
});
```

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

### Get current playback time

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the current playback position in seconds.

```js
player.getCurrentTime().then(function(seconds) {
    // seconds = the current playback position
}).catch(function(error) {
    // an error occurred
});
```

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

### Minimal Player Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Embed a Vimeo player with the most basic configuration, suitable for simple video playback. This example demonstrates the essential options for creating a functional player.

```html
<iframe src="https://player.vimeo.com/video/76979871?h=1234567890" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
```

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

### VimeoChapter Interface

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/types.md

Represents a chapter in a video, defined by its start time, title, and index.

```APIDOC
## VimeoChapter Interface

### Description
Represents a chapter in a video.

### Properties
- **startTime** (number) - Start time of the chapter in seconds
- **title** (string) - Chapter title
- **index** (number) - Position in the chapter list (1-based indexing)

### Example
```javascript
player.getChapters().then(chapters => {
  // chapters = [
  //   {startTime: 0, title: 'Introduction', index: 1},
  //   {startTime: 30, title: 'Main Content', index: 2}
  // ]
});
```
```

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

### Constrained Playback Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Set up a player for segmented playback, defining start and end times, and optionally showing a 'watch full' button. Preload is set to 'metadata'.

```javascript
const options = {
  id: 76979871,
  start_time: 0,        // Start at 0 seconds
  end_time: 120,        // Stop at 2 minutes
  watch_full_video: true, // Show "watch full" button
  preload: 'metadata'
};
const player = new Vimeo.Player('container', options);
```

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

### Play Event Data

Source: https://github.com/vimeo/player.js/blob/master/README.md

Example structure of data returned when the play event is triggered.

```js
{
    duration: 61.857
    percent: 0
    seconds: 0
}
```

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

### Configure Auto Preload

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Set the player to load metadata and the initial video segment immediately. This provides the best user experience but consumes more bandwidth.

```javascript
{ preload: 'auto' }              // Load metadata + initial video immediately
```

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

### getColor

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Gets the accent color of the player. This method is deprecated and `getColors()` should be used instead.

```APIDOC
## getColor

### Description
Gets the accent color of the player.

### Method
`getColor(): Promise<string>`

### Parameters
None

### Returns
`Promise<string>` — Resolves with the hex color code.

### Deprecated
Use `getColors()` instead.

### Usage Example
```javascript
player.getColor().then((color) => {
  console.log('Accent color:', color);
});
```
```

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

### Select Default Audio Track

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Enables the default (main) audio track for the video. Use this to revert to the primary audio.

```javascript
player.selectDefaultAudioTrack().then((track) => {
  console.log('Default audio track:', track);
});
```

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

### Example Event Data Structure (JSON)

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Illustrative JSON structure for event data, showing common properties like name, player, and value.

```json
{
  "name": "play",
  "player": "vimeo-player",
  "value": null
}
```

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

### getMuted

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/player-class.md

Gets the muted state of the player. Returns true if muted, and false otherwise.

```APIDOC
## getMuted()

### Description
Gets the muted state of the player.

### Method
Not applicable (SDK method)

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
player.getMuted().then((muted) => {
  console.log('Is muted:', muted);
});
```

### Response
#### Success Response
- **muted** (boolean) - True if muted, false otherwise

#### Response Example
(Resolves with true if muted, false otherwise)
```

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

### progress

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/events-reference.md

Fires as the video is loaded or buffered. The `percent` value indicates the buffered amount, not playback progress. It provides duration, buffered percent, and seconds.

```APIDOC
## progress

### Description
Triggered as the video is loaded/buffered.

### Event Data
- **duration** (number) - Total video duration in seconds
- **percent** (number) - The amount buffered, not the playback progress.
- **seconds** (number) - Current time in seconds

### Notes
- The `percent` value represents the amount buffered, not the playback progress.
- Fires multiple times as different portions buffer.

### Usage
```javascript
player.on('progress', (data) => {
  console.log(`Buffered: ${Math.round(data.percent * 100)}%`);
});
```
```

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

### Get Available Qualities

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves an array of available quality objects for the current video.

```js
player.getQualities().then(function(qualities) {
    // qualities = an array of quality objects
}).catch(function(error) {
    // an error occurred
});
```

```js
{
    "label": "4K",
    "id": "2160p",
    "active": true
}
```

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

### Enable Fullscreen Mode

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Enter fullscreen mode for the video player using `requestFullscreen()`. This method returns a Promise.

```javascript
player.requestFullscreen().then(function() {
    // fullscreen enabled
});
```

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

### Get playback rate

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the current playback rate on a scale from 0 to 2.

```js
player.getPlaybackRate().then(function(playbackRate) {
    // playbackRate = a numeric value of the current playback rate
}).catch(function(error) {
    // an error occurred
});
```

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

### Player Ready - Vimeo Player.js

Source: https://github.com/vimeo/player.js/blob/master/README.md

Use the `ready` method to execute a function once the player iframe has initialized. Event listeners and other methods can be called before `ready` is triggered.

```javascript
player.ready().then(function() {
    // the player is ready
});
```

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

### Get current chapter

Source: https://github.com/vimeo/player.js/blob/master/README.md

Retrieves the chapter object based on the current video time.

```js
player.getCurrentChapter().then(function(chapter) {
    // chapter = a chapter object
}).catch(function(error) {
    // an error occurred
});
```

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

### Initialize Player from Existing Embed

Source: https://github.com/vimeo/player.js/blob/master/README.md

Create a Player object by passing an existing iframe element, a jQuery object, or an iframe ID to the constructor.

```javascript
// Select with the DOM API
const iframe = document.querySelector('iframe');
const iframePlayer = new Vimeo.Player(iframe);

// Select with jQuery
// If multiple elements are selected, it will use the first element.
const jqueryPlayer = new Vimeo.Player($('iframe'));

// Select with the `<iframe>`’s id
// Assumes that there is an <iframe id="player1"> on the page.
const idPlayer = new Vimeo.Player('player1');
```

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

### Example VimeoError Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a VimeoError object, detailing error code, message, and name.

```json
{
  "code": 1000,
  "message": "Invalid parameters were passed to the API request.",
  "name": "InvalidParameterError"
}
```

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

### Attach Player to Existing iframe and Play

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Instantiate the player by passing an existing iframe element and control playback. Event listeners can be attached using the `on` method.

```javascript
const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);

player.play();
player.on('play', () => console.log('Playing'));
```

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

### Example Colors Object

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/README.md

Structure of a VimeoColors object, representing a four-element array for color customization.

```json
["#FF0000", "#00FF00", "#0000FF", "#FFFF00"]
```

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

### Set Preload Quality

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Use `initial_quality` to set the video quality loaded during preload, before playback begins. This can improve initial load times.

```javascript
{ initial_quality: '360p' }  // Quick initial load, auto-adjusts during playback
```

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

### 360° Video Camera Properties API

Source: https://github.com/vimeo/player.js/blob/master/README.md

Methods for getting and setting camera properties for 360° videos.

```APIDOC
## GET /player/camera-props

### Description
Get the current camera properties for a 360° video.

### Method
GET

### Endpoint
`/player/camera-props`

### Response
#### Success Response (200)
- **cameraProps** (object) - An object containing the current camera properties (`yaw`, `pitch`, `roll`, `fov`).

### Response Example
```json
{
  "yaw": 360,
  "pitch": 90,
  "roll": 180,
  "fov": 45
}
```

## POST /player/camera-props

### Description
Set the camera properties for a 360° video.

### Method
POST

### Endpoint
`/player/camera-props`

### Parameters
#### Request Body
- **cameraProps** (object) - Required - An object containing the camera properties to set (`yaw`, `pitch`, `roll`, `fov`).
  - **yaw** (number) - Between 0 and 360, left and right.
  - **pitch** (number) - Between -90 and 90, up and down.
  - **roll** (number) - Between -180 and 180.
  - **fov** (number) - The field of view in degrees.

### Request Example
```json
{
  "yaw": 360,
  "pitch": 90,
  "roll": 180,
  "fov": 45
}
```

### Response
#### Success Response (200)
- **cameraProps** (object) - The camera properties that were successfully set.

#### Response Example
```json
{
  "yaw": 360,
  "pitch": 90,
  "roll": 180,
  "fov": 45
}
```
```

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

### Configure Responsive Player Sizing

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/INDEX.md

Create a Vimeo player with responsive sizing enabled. The player will adapt to its container's dimensions. Requires a container element.

```javascript
const player = new Vimeo.Player('container', {
  id: 76979871,
  width: 640,
  responsive: true
});
```

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

### Performance-Optimized Player Configuration

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Optimize player performance by deferring loading until hover, starting with lower quality, and setting adaptive quality options.

```javascript
const options = {
  id: 76979871,
  preload: 'metadata_on_hover',  // Don't load until needed
  initial_quality: '360p',       // Start with low quality
  quality: 'auto',               // Let player adapt
  min_quality: '360p',
  max_quality: '1080p',
  responsive: true
};
const player = new Vimeo.Player('container', options);
```

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

### Video Quality API

Source: https://github.com/vimeo/player.js/blob/master/README.md

Methods for getting available video qualities and setting the current quality.

```APIDOC
## GET /player/qualities

### Description
Get the available qualities of the current video.

### Method
GET

### Endpoint
`/player/qualities`

### Response
#### Success Response (200)
- **qualities** (Array<object>) - An array of quality objects, each with `label`, `id`, and `active` properties.

### Response Example
```json
[
  {
    "label": "4K",
    "id": "2160p",
    "active": true
  }
]
```

## GET /player/quality

### Description
Get the current selected quality.

### Method
GET

### Endpoint
`/player/quality`

### Response
#### Success Response (200)
- **quality** (string) - The current selected quality (e.g., '720p').

### Response Example
```json
{
  "quality": "720p"
}
```

## POST /player/quality

### Description
Set the quality of the video. (available to Plus, PRO and Business accounts)

### Method
POST

### Endpoint
`/player/quality`

### Parameters
#### Request Body
- **quality** (string) - Required - The desired quality (e.g., '720p').

### Request Example
```json
{
  "quality": "720p"
}
```

### Response
#### Success Response (200)
- **quality** (string) - The quality that was successfully set.

#### Response Example
```json
{
  "quality": "720p"
}
```
```

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

### ChapterChangeEvent Interface

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/types.md

Defines the event data for chapter changes, including the start time of the chapter and its title.

```typescript
interface ChapterChangeEvent {
  startTime: Seconds;
  title: string;
  index: number;
}
```

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

### Remove Ready Handler

Source: https://github.com/vimeo/player.js/blob/master/docs/migrate-from-froogaloop.md

The ready event is no longer required. Event listeners can be added directly. For setup code, the `ready()` promise is available but not recommended.

```javascript
froogaloop.addEvent('ready', function() {
    froogaloop.addEvent('pause', onPause);
});

player.on('pause', onPause);
```

```javascript
player.ready().then(function() {
    player.on('pause', onPause);
});
```

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

### Listen for Duration Change

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/events-reference.md

This snippet logs the video duration when it is updated, which typically occurs at the start of playback.

```javascript
player.on('durationchange', (data) => {
  console.log(`Video duration: ${data.duration}s`);
});
```

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

### Set Initial Playback Quality

Source: https://github.com/vimeo/player.js/blob/master/_autodocs/configuration-guide.md

Control the initial playback quality with the `quality` option. 'auto' selects the best quality for the current bandwidth.

```javascript
{ quality: '720p' }
```

```javascript
{ quality: '1080p' }
```

```javascript
{ quality: 'auto' }  // Best quality for available bandwidth
```