### Basic HLS and MPEG-DASH Player Setup

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/adaptive-streaming.html

Sets up basic HLS and MPEG-DASH video players using the cloudinary.videoPlayer function. This example demonstrates how to specify source types and basic info for each player.

```html
<video           id="example-player-hls"           controls           autoplay           muted           width="500"           class="cld-video-player">         </video>          <video           id="example-player-dash"           controls           autoplay           muted           width="500"           class="cld-video-player">         </video>
```

```javascript
const config =  {cloud_name: 'demo'};
          var playerHls = cloudinary.videoPlayer('example-player-hls', config);
         var playerDash = cloudinary.videoPlayer('example-player-dash' , config);

          playerHls.source(
            'sea_turtle',
            {
              sourceTypes: ['hls'],
              info: {title: 'HLS'}
            }
          );

          playerDash.source(
            'sea_turtle',
            {
              sourceTypes: ['dash'],
              info: {title: 'MPEG-DASH'}
            }
          );
```

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

### Complete Example: Force HLS Subtitles with Cloudinary Video Player

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/force-hls-subtitles.html

This example demonstrates how to initialize the Cloudinary Video Player, force HLS subtitles, and define text tracks with their respective URLs and labels.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/adaptive-streaming';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = videoPlayer('player', {
  cloudName: 'demo',
  html5: {
    vhs: {
      overrideNative: true
    }
  }
});

player.source('sea_turtle', {
  sourceTypes: ['hls'],
  transformation: {
    streaming_profile: 'hd'
  },
  textTracks: {
    captions: {
      label: 'English(captions)',
      language: 'en',
      default: true,
      url: 'https://res.cloudinary.com/demo/raw/upload/outdoors.vtt'
    },
    subtitles: [
      {
        label: 'English',
        language: 'en',
        url: 'https://res.cloudinary.com/demo/raw/upload/outdoors.vtt'
      }
    ]
  }
});
```

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

### Initialize Cloudinary Video Player with /all build

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/all.html

Use the /all build to import all plugins at once. This example demonstrates initializing the player with basic configuration and chapter markers.

```javascript
import { videoPlayer } from 'cloudinary-video-player/all';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = videoPlayer('player', {
  cloudName: 'demo',
  publicId: 'dog',
  autoplay: true,
  chapters: {
    0: 'Chapter I',
    3: 'Chapter II',
    8: 'Chapter III',
  }
});
```

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

### Lazy Player Initialization Examples

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/lazy-player.html

Provides two examples of lazy player initialization. The first uses an explicit poster URL and custom accent color. The second uses `loadOnScroll: true` for automatic loading and defines base and accent colors.

```javascript
// With explicit poster URL
const player = await cloudinary.player('my-video', {
  cloudName: 'demo',
  publicId: 'sea_turtle',
  poster: 'https://res.cloudinary.com/demo/video/upload/so_0,f_auto,q_auto/sea_turtle.jpg',
  lazy: true,
  colors: { accent: '#ff4081' }
});
// await player.loadPlayer();

// Auto-built poster from cloudName + publicId
cloudinary.player('my-video', {
  cloudName: 'demo',
  publicId: 'sea_turtle',
  lazy: { loadOnScroll: true },
  colors: { base: '#0d1b2a', accent: '#00b4d8' }
});
```

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

### Basic HTML Video Player Setup

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/components.html

Standard HTML setup for a video player element. This element will be targeted by the Cloudinary Video Player JavaScript.

```html
<video
  id="player"
  controls
  muted
  autoplay
  class="cld-video-player"
  width="500">
</video>
```

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

### Initialize Video Player with Poster Options Transformations

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/poster.html

Apply complex transformations to the poster image using the `posterOptions.transformation` array. This example includes resizing, cropping, and overlaying an image.

```html
<video           id="player-poster-options"           playsinline           controls           class="cld-video-player cld-fluid"           data-cld-poster-options='{ "transformation": [{"width": "640", "height": "360", "crop": "pad", "effect": "grayscale" },{"overlay":"cloudinary_icon", "width":"300"},{"quality": "auto", "fetch_format": "auto"}] }'>         </video>
```

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

### Initialize Video Player with Source Configuration

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/aspect-ratio-crop.html

Initialize the Cloudinary Video Player and set the source with specific aspect ratio and crop mode configurations. This example demonstrates 'fill', 'pad', and 'smart' modes.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const player1 = videoPlayer('player-1', {
  cloudName: 'demo'
});
player1.source({
  publicId: 'sea_turtle',
  aspectRatio: '1:1',
  cropMode: 'fill'
});

const player2 = videoPlayer('player-2', {
  cloudName: 'demo'
});
player2.source({
  publicId: 'sea_turtle',
  aspectRatio: '4:3',
  cropMode: 'pad',
  cropPadColor: 'blue'
});

const player3 = videoPlayer('player-3', {
  cloudName: 'demo'
});
player3.source({
  publicId: 'sea_turtle',
  aspectRatio: '9:16',
  cropMode: 'smart'
});
```

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

### Initialize Audio Player with Transformations

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/audio.html

Initialize an audio player and play a source with specific playback transformations like start offset and duration. The HTML video element must be present.

```html
<video           id="player-t"           playsinline           controls           class="cld-video-player"           width="500"         ></video>
```

```javascript
var player_t = cloudinary.videoPlayer('player-t', { cloud_name: 'demo' });
var sourceTransformation = {
  publicId: 'dog',
  'sourceTypes': ['audio'],
  transformation: {
    start_offset: 3,
    duration: 5
  }
};
player_t.source(sourceTransformation);
```

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

### Comprehensive Lazy Player Initialization and Event Listener

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/lazy-player.html

A complete example demonstrating lazy player initialization with an explicit poster, custom colors, logo, and an event listener to manually load the player. It also includes a second player configured for scroll-to-load functionality.

```javascript
import { player as createPlayer } from 'cloudinary-video-player/lazy';
import 'cloudinary-video-player/cld-video-player.min.css';

(async () => {
  const player = await createPlayer('player', {
    cloudName: 'demo',
    publicId: 'sea_turtle',
    poster: 'https://res.cloudinary.com/demo/video/upload/so_0,f_auto,q_auto/sea_turtle.jpg',
    lazy: true,
    colors: { accent: '#ff4081' },
    logoImageUrl: 'https://res.cloudinary.com/demo/image/upload/c_scale,w_100/cloudinary_logo.png',
    logoOnclickUrl: 'https://cloudinary.com'
  });

  document.getElementById('btn-load').addEventListener('click', () => {
    if (player && typeof player.loadPlayer === 'function') {
      player.loadPlayer();
    }
  });

  createPlayer('player-scroll', {
    cloudName: 'demo',
    publicId: 'sea_turtle',
    lazy: { loadOnScroll: true },
    colors: { base: '#0d1b2a', accent: '#00b4d8' }
  });
})();
```

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

### Initialize Video Player with Custom Poster

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/poster.html

Use the `data-cld-poster-options` attribute to specify a custom poster image and apply transformations. This example sets a custom poster with a saturation effect.

```html
<video           id="player-image-poster"           playsinline           controls           class="cld-video-player cld-fluid"           data-cld-transformation='{ "effect": ["saturation:-100"] }'           data-cld-poster-options='{ "publicId": "sample", "effect": ["saturation:-100"] }'>         </video>
```

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

### Dynamic Player Loading with Schedule Modes (ESM)

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/schedule.html

This example demonstrates how to dynamically load the player or show a poster based on user interaction, adjusting the schedule accordingly. It uses lazy loading for the player.

```javascript
import { player } from 'cloudinary-video-player/lazy';
import 'cloudinary-video-player/cld-video-player.min.css';

const DAY_NAMES = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
let currentPlayer = null;

function getScheduleForImageMode() {
  const now = new Date();
  const today = now.getDay();
  const slots = [];
  for (let d = 0; d < 7; d++) {
    if (d !== today) {
      slots.push({ day: DAY_NAMES[d], start: '00:00', duration: 24 });
    }
  }
  return slots;
}

function getScheduleForPlayerMode() {
  const now = new Date();
  const today = now.getDay();
  return [{ day: DAY_NAMES[today], start: '00:00', duration: 24 }];
}

function loadPlayerWithMode(showPlayer) {
  if (currentPlayer && typeof currentPlayer.dispose === 'function') {
    currentPlayer.dispose();
  }
  const container = document.getElementById('player-container');
  container.innerHTML = '<video id="player" playsinline controls muted class="cld-video-player cld-fluid" width="500"></video>';
  const scheduleLabel = document.getElementById('schedule-label');
  scheduleLabel.textContent = showPlayer ? 'Schedule: Today 00:00-23:59 (player visible)' : 'Schedule: All days except today (poster visible)';
  const schedule = showPlayer ? getScheduleForPlayerMode() : getScheduleForImageMode();
  const options = {
    cloudName: 'demo',
    publicId: 'sea_turtle',
    schedule: { weekly: schedule }
  };
  currentPlayer = player('player', options);
  if (currentPlayer && typeof currentPlayer.then === 'function') {
    currentPlayer.then((player) => {
      currentPlayer = player;
    });
  }
}

document.getElementById('btn-image').addEventListener('click', () => loadPlayerWithMode(false));
document.getElementById('btn-player').addEventListener('click', () => loadPlayerWithMode(true));

loadPlayerWithMode(false);

```

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

### Initialize Cloudinary Video Player with Customizations

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/ui-config.html

Initialize the Cloudinary Video Player with various UI configurations. This example shows how to set a custom logo, enable jump controls, picture-in-picture, custom fonts, and playback rates. Use this for advanced UI customization.

```javascript
var player = cloudinary.videoPlayer('player', {           cloud_name: 'demo',           publicId: 'snow_horses',           info: { title: 'Snow Horses', subtitle: 'A movie about horses' },           hideContextMenu: true,           logoImageUrl: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Facebook_Like_React.png',           logoOnclickUrl: 'https://google.com',           showLogo: true,           showJumpControls: true,           pictureInPictureToggle: true,           fontFace: 'Lobster',           bigPlayButton: false,           playbackRates: [0.5, 1, 1.5, 2]         });
```

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

### Configure Cloudinary Video Player with Source Options

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/video-details.html

This snippet shows how to initialize the player and set video sources with various options for title and description. It includes examples for auto-fetching, custom descriptions, and legacy format compatibility.

```html
<video 
          id="player" 
          controls 
          muted 
          autoplay 
          class="cld-video-player" 
          width="500" 
        ></video>
```

```javascript
// Auto-fetch both title and description 
        const player = cloudinary.videoPlayer('player', { cloudName: 'demo' }); 
                 player.source({ 
          publicId: 'my-video', 
          title: true, 
          description: true 
        }); 
         
          // Mixed approach: auto-fetch title, custom description 
        player.source({ 
          publicId: 'my-video', 
          title: true, 
          description: 'Custom description text' 
        }); 
         
          // Backward compatible with legacy format 
        player.source({ 
          publicId: 'my-video', 
          title: true, 
          info: { subtitle: 'Fallback if auto-fetch fails' } 
        });
```

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

### Initialize Cloudinary Video Players with Multiple Entry Points

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/multiple-entry-points.html

Use different import paths for the Cloudinary Video Player to manage dependencies and configurations. Import the default 'videoPlayer' for basic usage and '/all' for extended features like chapters. Ensure CSS is imported separately. This setup is useful when you need distinct player functionalities on the same page.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import cloudinaryAll from 'cloudinary-video-player/all';
import 'cloudinary-video-player/cld-video-player.min.css';

const log = (msg) => {
  document.getElementById('results').textContent += msg + '\n';
};

try {
  const p1 = videoPlayer('player-basic', {
    cloudName: 'demo',
    publicId: 'sea_turtle',
  });
  log(`✅ Basic player created: ${p1 ? 'ok' : 'failed'}`);

  const p2 = cloudinaryAll.videoPlayer('player-all', {
    cloudName: 'demo',
    publicId: 'dog',
    chapters: {
      0: 'Chapter I',
      3: 'Chapter II',
      8: 'Chapter III',
    },
  });
  log(`✅ /all player with chapters created: ${p2 ? 'ok' : 'failed'}`);

  log('\n📋 Check Network tab: shared chunks should appear only once');
} catch (err) {
  log(`❌ Error: ${err.message}`);
  console.error(err);
}
```

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

### Install Cloudinary Video Player via NPM

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/README.md

Install the Cloudinary Video Player package using npm. This command downloads the necessary files to your project.

```shell
npm install cloudinary-video-player
```

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

### Initialize Player with Poster Options

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/poster.html

This snippet demonstrates initializing the player with general poster options. The specific poster behavior depends on the `posterOptions` configuration, which is not detailed here but implied by the context.

```javascript
const playerPosterOptions = videoPlayer('player-poster-options', {
  cloudName: 'demo',
  publicId: 'dog'
});
```

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

### Initialize Player with Custom Image Poster

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/poster.html

Use the `posterOptions` with a `transformation` to specify a custom image for the video poster. Ensure the `publicId` is set correctly.

```javascript
import 'cloudinary-video-player/cld-video-player.min.css';
import 'cloudinary-video-player/adaptive-streaming';
import { videoPlayer } from 'cloudinary-video-player';

const playerImagePoster = videoPlayer('player-image-poster', {
  cloudName: 'demo',
  publicId: 'snow_horses'
});
```

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

### Playback Controls

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/api.html

Provides examples for controlling video playback, including seeking, playing, pausing, stopping, and volume adjustments.

```APIDOC
## Playback Controls

### Description
These examples demonstrate how to use the Cloudinary Video Player API to control various aspects of video playback, such as seeking to a specific time, playing, pausing, stopping, and adjusting the volume.

### Method
JavaScript

### Endpoint
N/A (Client-side JavaScript API)

### Player Methods
- **player.currentTime(time)**: Sets or gets the current playback time in seconds.
- **player.play()**: Starts or resumes video playback.
- **player.pause()**: Pauses video playback.
- **player.stop()**: Stops video playback and resets to the beginning.
- **player.mute()**: Mutes the audio.
- **player.unmute()**: Unmutes the audio.
- **player.volume(level)**: Sets or gets the volume level (0.0 to 1.0).
- **player.playPrevious()**: Plays the previous video in the playlist.
- **player.playNext()**: Plays the next video in the playlist.
- **player.maximize()**: Toggles fullscreen mode.
- **player.controls(boolean)**: Toggles the visibility of player controls.

### Request Example
```javascript
// Seek backward by 10 seconds
document.querySelector('#vid-seek-minus').addEventListener('click', function () {
  player.currentTime(player.currentTime() - 10);
});

// Seek forward by 10 seconds
document.querySelector('#vid-seek-plus').addEventListener('click', function () {
  player.currentTime(player.currentTime() + 10);
});

// Play previous video
document.querySelector('#vid-play-prev').addEventListener('click', function () {
  player.playPrevious();
});

// Play video
document.querySelector('#vid-play').addEventListener('click', function () {
  player.play();
});

// Play next video
document.querySelector('#vid-play-next').addEventListener('click', function () {
  player.playNext();
});

// Pause video
document.querySelector('#vid-pause').addEventListener('click', function () {
  player.pause();
});

// Stop video
document.querySelector('#vid-stop').addEventListener('click', function () {
  player.stop();
});

// Mute audio
document.querySelector('#vid-mute').addEventListener('click', function () {
  player.mute();
});

// Unmute audio
document.querySelector('#vid-unmute').addEventListener('click', function () {
  player.unmute();
});

// Decrease volume by 10%
document.querySelector('#vid-volume-minus').addEventListener('click', function () {
  player.volume(player.volume() - 0.1);
});

// Increase volume by 10%
document.querySelector('#vid-volume-plus').addEventListener('click', function () {
  player.volume(player.volume() + 0.1);
});

// Toggle fullscreen
document.querySelector('#vid-maximize').addEventListener('click', function () {
  player.maximize();
});

// Toggle controls visibility
document.querySelector('#vid-toggle-controls').addEventListener('click', function () {
  player.controls(!player.controls());
});
```

### Response
N/A (These are method calls, not request/response operations.)
```

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

### Override Player Configuration with Profile

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/profiles.html

Override profile configurations by providing JavaScript player options. This example overrides colors defined in the 'demo-profile'.

```javascript
import { player } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

(async () => {
  await player('player-profile-override', {
    cloudName: 'prod',
    profile: 'demo-profile',
    publicId: 'samples/sea-turtle',
    colors: {
      base: '#22004D',
      accent: '#FA65C7',
      text: '#FF06D2'
    },
  });
})();
```

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

### Initialize Video Player with Applet Poster

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/poster.html

Enable applet service URL for the poster by setting `poster: true`. This is useful for specific service integrations.

```html
<video           id="player-applet-poster"           playsinline           controls           class="cld-video-player cld-fluid"         ></video>
```

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

### Override Source Configuration with Profile

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/profiles.html

Override profile transformations by providing JavaScript source options. This example applies a blur effect not present in the 'demo-profile'.

```javascript
import { player } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

(async () => {
  await player('player-source-override', {
    cloudName: 'prod',
    profile: 'demo-profile',
    publicId: 'samples/sea-turtle',
    transformation: {
      effect: 'blur:500'
    },
  });
})();
```

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

### Initialize Audio Player with Source

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/audio.html

Use this to initialize a basic audio player and play a source. Ensure the HTML video element with the specified ID exists.

```html
<video           id="player"           playsinline           controls           class="cld-video-player"           width="500"         ></video>
```

```javascript
var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });
var source = { publicId: 'dog', 'sourceTypes': ['audio'] };
player.source(source);
```

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

### Load Default Profile Configuration

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/profiles.html

Applies a predefined player configuration using the default profile. Use this when you want a standard setup without explicit JS options.

```javascript
const player = await cloudinary.player('player-default-profile', {
  cloudName: 'demo',
  profile: 'cld-default',
});
player.source('samples/sea-turtle');
```

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

### ES Module Import and Initialization

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/index.html

Import the video player and its CSS, then initialize a player instance. Ensure the cloud name is correctly set.

```javascript
import { videoPlayers } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = videoPlayers('.cld-video-player', {
  cloudName: 'demo'
});
```

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

### Initialize Cloudinary Video Player

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/autoplay-on-scroll.html

Initialize the Cloudinary video player with the player's ID and your cloud name. This setup is required for the player to function and interact with Cloudinary.

```javascript
var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });
```

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

### Google Analytics (GA4) Setup

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/analytics.html

Include this script to set up Google Analytics 4. Replace 'G-XXXXXXX' with your actual Measurement ID. The debug_mode option is useful for development.

```javascript
<!-- Google Analytics Code Snippet (GA4) -->         <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>         <script>           window.dataLayer = window.dataLayer || [];           function gtag(){dataLayer.push(arguments);}           gtag('js', new Date());           gtag('config', 'G-XXXXXXX', { debug_mode: true });         </script>
```

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

### TypeScript Type Definitions

Source: https://context7.com/cloudinary/cloudinary-video-player/llms.txt

Import and use TypeScript types for Cloudinary Video Player components and functions. Includes examples for synchronous, asynchronous, and global UMD usage.

```typescript
import { videoPlayer, player, VideoPlayer } from 'cloudinary-video-player';

// Synchronous
const vp: VideoPlayer = videoPlayer('player', { cloudName: 'demo' });
vp.source('sea_turtle');
vp.play();

// Async / profile-aware
const asyncVP: VideoPlayer = await player('player', {
  cloudName: 'demo',
  profile: 'my-profile'
});

// Access via window.cloudinary (global UMD)
declare global {
  interface Window { cloudinary: import('cloudinary-video-player').Cloudinary; }
}
const globalPlayer: VideoPlayer = window.cloudinary.videoPlayer('player', { cloudName: 'demo' });
```

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

### Initialize Video Player with Recommendations

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/recommendations.html

Initializes the Cloudinary Video Player and sets a video source with recommendations. Ensure the player is initialized with `autoShowRecommendations: true` to display them.

```html
<video           id="player"           controls           muted           autoplay           class="cld-video-player cld-video-player-skin-dark"           data-cld-transformation='{ "width": 500, "crop": "limit" }'         ></video>
```

```javascript
var source1 = {           publicId: 'surf_competition',           info: {             title: 'Surf competition',             subtitle: 'A movie about a surf competition',             description: 'A description of the surf competition movie'           }         };

        var source2 = {           publicId: 'finish_line',           info: {             title: 'Finish line',             subtitle: 'A short video of a finish line',             description: 'A description of the finish line movie.'           }         };

        source1.recommendations = [source2];

        source2.recommendations = new Promise((resolve, _) => {
          console.log('Going to database...');
          setTimeout(() => {
            console.log('Fetched source from database.', source1)
            resolve([source1]);
          }, 3000);
        });

        var player = cloudinary.videoPlayer('player', { cloud_name: 'demo', autoShowRecommendations: true });

        player.source(source1);
```

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

### Initialize Player with VTT Chapters

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/chapters.html

Use the 'chapters.url' option to specify the VTT file for chapters. Ensure 'chaptersButton' is set to true to display the chapters button.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const playerVTT = videoPlayer('player-vtt', {
  cloudName: 'demo',
  publicId: 'snow_horses',
  info: {
    title: 'Snow Horses',
    subtitle: 'A movie about horses'
  },
  chapters: {
    url: 'https://res.cloudinary.com/tsachi/raw/upload/tests/snow_horses_chapters_k1e1ff.vtt'
  },
  chaptersButton: true
});
```

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

### Initialize Cloudinary Video Player

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/_template.html

Import the necessary module and CSS, then initialize the video player with your cloud name and public ID.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = videoPlayer('player', {
  cloudName: 'demo',
  publicId: 'dog'
});
```

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

### Initialize Video Player with Raw URL

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/poster.html

Load a video from a raw URL. The player will use a default poster if none is explicitly provided.

```html
<video           id="player-raw"           playsinline           controls           class="cld-video-player cld-fluid"         ></video>
```

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

### Paced & Styled Captions

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/subtitles-and-captions.html

Configure paced captions with customizable options for max words, theme, font, and gravity. The example includes event listeners to dynamically update caption settings.

```javascript
const pacedPlayer = videoPlayer('paced', {
  cloudName: 'prod'
});

const publicId = 'video/examples/cloudinary-marketing';

const textTracks = {
  options: {
    // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d'
    // fontFace: "", // any Google font
    // fontSize: "", // any CSS value
    // gravity: "", // i.e. 'top-left', 'center' etc
    // box: {
    // Object of x/y/width/height
    // x: "0%",
    // y: "0%",
    // width: "100%",
    // height: "100%"
    // },
    // style: {
    // Styles key-value object
    // color: "hotpink"
    // }
  },
  captions: {
    label: 'English Paced',
    maxWords: 4,
    default: true,
  }
}

pacedPlayer.source(publicId, { textTracks });

const maxWordsInput = document.getElementById('maxWords');
const themeSelect = document.getElementById('theme');
const fontSelect = document.getElementById('font');
const gravitySelect = document.getElementById('gravity');
const applyButton = document.getElementById('apply');

applyButton.addEventListener('click', function () {
  textTracks.captions.maxWords = parseInt(maxWordsInput.value);
  textTracks.options.theme = themeSelect.value;
  textTracks.options.fontFace = fontSelect.value;
  textTracks.options.gravity = gravitySelect.value;
  pacedPlayer.source(publicId, { textTracks });
});
```

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

### Initialize 360 Video Player

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/360.html

Requires the 'videojs-vr' package. Ensure the CSS is imported. Configure the player with cloud name, public ID, and source types, then enable VR mode with '360' projection.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'https://unpkg.com/videojs-vr@2.0.0/dist/videojs-vr.js';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = cloudinary.videoPlayer('player', {
  cloudName: 'demo',
  publicId: 'video-player/Golden-Gate-Bridge',
  sourceTypes: ['mp4']
});

player.videojs.vr({
  projection: '360'
});
```

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

### JavaScript Code Style Example

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/AGENTS.md

Illustrates good and bad practices for JavaScript functions, emphasizing single return statements and clear control flow. Use the 'good' pattern for maintainability.

```javascript
// Good - single return, clear flow
function buildVideoUrl(source) {
  const baseUrl = getBaseUrl(source);
  const params = buildParams(source);
  return `${baseUrl}?${params}`;
}
```

```javascript
// Bad - multiple returns, defensive fallbacks when normalization exists
function buildVideoUrl(source) {
  if (!source) return '';
  const baseUrl = source.baseUrl || getBaseUrl(source) || '';
  return fetch(baseUrl).then(r => r.json());
}
```

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

### Initialize Player and Load Source with Visual Search

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/visual-search.html

Import the necessary modules and initialize the Cloudinary Video Player. Load a video source and enable visual search by setting the `visualSearch` option to `true` in the player configuration.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = videoPlayer('player', {
  cloudName: 'demo'
});

// Load source with visual search enabled
player.source({
  publicId: 'marketing-video-2025',
  info: {
    title: 'Visual search',
    subtitle: 'Real results from indexed video'
  },
  chapters: {
    0: 'Opening credits',
    3: 'A dangerous quest',
    8: 'The attack'
  },
  visualSearch: true
});
```

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

### Audio Player with Transformations

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/audio.html

Configure the Cloudinary Video Player to play audio with specific transformations, such as setting a start offset and duration. The source object can directly include transformation parameters.

```javascript
const player_t = videoPlayer('player-t', {
  cloudName: 'demo'
});

const sourceTransformation = (player_t.sourceTransformation = {
  publicId: 'dog',
  sourceTypes: ['audio'],
  transformation: {
    start_offset: 3,
    duration: 5
  }
});

player_t.source(sourceTransformation);
```

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

### Auto-fetch Title, Custom Description (JavaScript)

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/video-details.html

This example shows how to auto-fetch the video title from Cloudinary while providing a custom, hard-coded description. Useful for overriding default descriptions or when titles are important to fetch automatically.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const player2 = videoPlayer('player2', {
  cloudName: 'demo'
});
player2.source({
  publicId: 'snow_horses',
  title: true,
  description: 'Hard-coded description for snow horses video'
});
```

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

### Initialize Shoppable Video Player

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/shoppable.html

Initialize the Cloudinary Video Player with shoppable video configuration. Ensure the 'cloudinary-video-player' and its CSS are imported. The 'cloudName' is required, and the 'shoppable' object contains all product and interaction details.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const player = videoPlayer('player', {
  cloudName: 'demo'
});

const source = {
  info: {
    title: 'Shoppable Video',
    description: 'Browse products shown in the video.'
  },
  shoppable: {
    startState: 'openOnPlay',
    autoClose: 2,
    showPostPlayOverlay: true,
    bannerMsg: 'START SHOPPING',
    width: '20%',
    toggleIcon: 'https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_icon_for_white_bg.png',
    transformation: {
      crop: 'fill',
      aspect_ratio: '1'
    },
    products: [
      {
        productId: 1,
        productName: 'Bell Pepper',
        startTime: 0,
        endTime: 2,
        title: 'Overlay on-hover & seek on-click',
        publicId: 'docs/pepper',
        hotspots: [
          {
            time: '00:02',
            x: '80%',
            y: '30%',
            tooltipPosition: 'bottom',
            clickUrl: 'https://www.example.net/product-one'
          }
        ],
        onHover: {
          action: 'overlay',
          args: 'Click to see this product in the video'
        },
        onClick: {
          action: 'seek',
          pause: 5,
          args: {
            time: '00:02'
          }
        }
      },
      {
        productId: 2,
        productName: 'Tomato',
        startTime: 2,
        endTime: 5,
        publicId: 'docs/tomatoes',
        onHover: {
          action: 'switch',
          args: {
            publicId: 'docs/tomatoes_alternate'
          }
        },
        onClick: {
          action: 'goto',
          pause: true,
          args: {
            url: 'https://www.example.net/product-two'
          }
        }
      },
      {
        productId: 3,
        productName: 'Banana',
        startTime: 7,
        endTime: 11,
        publicId: 'docs/banana',
        onHover: {
          action: 'switch',
          args: {
            publicId: 'docs/banana_alternate'
          }
        },
        onClick: {
          action: 'goto',
          pause: true,
          args: {
            url: 'https://www.example.net/product-three'
          }
        }
      },
      {
        productName: 'Product 4',
        productId: 4,
        publicId: 'balloons'
      },
      {
        productName: 'Product 5',
        productId: 5,
        publicId: 'friends'
      }
    ]
  }
};

player.source('snow_horses', source);
```

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

### Configure Video Player with Subtitles and Captions

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/subtitles-and-captions.html

Initialize a video player and set up text tracks for captions and multiple subtitle languages. Supports auto-translated transcripts.

```javascript
});          // Auto-translated transcript         const translatedTranscriptPlayer = cloudinary.videoPlayer('translated-transcript', {           cloudName: 'prod'         });          translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', {           textTracks: {             captions: {               label: "Original",               default: true,             },             subtitles: [               {                 label: "English",                 language: "en-US",               },               {                 label: "Polish",                 language: "pl-PL",               },               {                 label: "Hebrew",                 language: "he-IL",               },               {                 label: "Italian",                 language: "it-IT",               },               {                 label: "Ukrainian",                 language: "uk-UA",               }             ]           }         });
```

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

### Initialize Video Player with Playlist

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/playlist.html

Sets up a video player element and configures it to play a playlist. Ensure the HTML video tag with the 'cld-video-player' class is present. The playlist options control playback behavior like auto-advancing and repeating.

```html
<video         id="player"         controls         autoplay         class="cld-video-player"         width="500">       </video>
```

```javascript
var source1 = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about snow horses' } };       var source2 = { publicId: 'dirt_bike', info: { title: 'Dirt Bike', subtitle: 'A short video of dirt bikes' } };       var source3 = { publicId: 'marmots', info: { title: 'Marmots' } };        var player = cloudinary.videoPlayer('player',{         cloud_name: 'demo',         playlistWidget: {           direction: "horizontal",           total: 4         }       });        var playlistSources = [source1, source2, source3];       var playlistOptions = {           autoAdvance: true,           repeat: true,           presentUpcoming: 8       };       // Auto advance to next video after 0 seconds, repeat the playlist when final video ends, and present upcoming video 8 seconds before the current video ends.       player.playlist(playlistSources, playlistOptions);
```

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

### Initialize and Configure Shoppable Video Player

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/shoppable.html

Initialize the Cloudinary video player and define the source with shoppable product details. This includes product information, timings, interactions, and display settings.

```html
<video           id="player"           playsinline           controls           muted           autoplay           class="cld-video-player cld-fluid cld-video-player-skin-light"         ></video>
```

```javascript
// Initialize player         var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });          // Define source         var source = {           info: {             title: 'Shoppable Video',             description: 'Browse products shown in the video.',           },           shoppable: {             startState: 'openOnPlay',             autoClose: 2,             showPostPlayOverlay: true,             bannerMsg: 'START SHOPPING',             width: '20%',             toggleIcon: "https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_icon_for_white_bg.png",             transformation: {               crop: "fill",               aspect_ratio: "1"             },             products: [               {                 productId: 1,                 productName: "Bell Pepper",                 startTime: 0,                 endTime: 2,                 title: 'Overlay on-hover & seek on-click',                 publicId: "docs/pepper",                 hotspots: [                   {                     time: "00:02",                     x: "50%",                     y: "50%",                     tooltipPosition: "left",                     clickUrl: "https://www.example.net/product-one"                   }                 ],                 onHover: {                   action: "overlay",                   args: "Click to see this product in the video"                 },                 onClick: {                   action: "seek",                   pause: 5,                   args: {                     time: "00:01"                   }                 }               },               {                 productId: 2,                 productName: "Tomato",                 startTime: 2,                 endTime: 5,                 publicId: "docs/tomatoes",                 onHover: {                   action: "switch",                   args: {                     publicId: "docs/tomatoes_alternate"                   }                 },                 onClick: {                   action: "goto",                   pause: true,                   args: {                     url: "https://www.example.net/product-two"                   }                 }               },               {                 productId: 3,                 productName: "Banana",                 startTime: 7,                 endTime: 11,                 publicId:                   "docs/banana",                 onHover: {                   action: "switch",                   args: {                     publicId: "docs/banana_alternate"                   }                 },                 onClick: {                   action: "goto",                   pause: true,                   args: {                     url:                       "https://www.example.net/product-three"                   }                 }               },               {                 productName: 'Product 4',                 productId: 4,                 publicId: 'balloons'               },               {                 productName: 'Product 5',                 productId: 5,                 publicId: 'friends'               }             ]           }         };          // Play source         player.source('snow_horses', source);
```

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

### Load Player with Dynamic Schedule Logic

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/schedule.html

Dynamically loads the Cloudinary player with a schedule that changes based on whether the player or a poster image should be visible. This example includes event listeners for button clicks to switch between modes.

```javascript
(function () {
  var DAY_NAMES = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
  var currentPlayer = null;

  function getScheduleForImageMode() {
    var now = new Date();
    var today = now.getDay();
    var slots = [];
    for (var d = 0; d < 7; d++) {
      if (d !== today) {
        slots.push({ day: DAY_NAMES[d], start: '00:00', duration: 24 });
      }
    }
    return slots;
  }

  function getScheduleForPlayerMode() {
    var now = new Date();
    var today = now.getDay();
    return [{ day: DAY_NAMES[today], start: '00:00', duration: 24 }];
  }

  async function loadPlayerWithMode(showPlayer) {
    if (currentPlayer && typeof currentPlayer.dispose === 'function') {
      currentPlayer.dispose();
    }
    var container = document.getElementById('player-container');
    container.innerHTML = '<video id="player" playsinline controls muted class="cld-video-player cld-fluid" width="500"></video>';
    var scheduleLabel = document.getElementById('schedule-label');
    scheduleLabel.textContent = showPlayer ? 'Schedule: Today 00:00-23:59 (player visible)' : 'Schedule: All days except today (poster visible)';
    var schedule = showPlayer ? getScheduleForPlayerMode() : getScheduleForImageMode();
    var options = {
      cloudName: 'demo',
      publicId: 'sea_turtle',
      schedule: { weekly: schedule }
    };
    currentPlayer = await cloudinary.player('player', options);
  }

  window.addEventListener('load', function () {
    document.getElementById('btn-image').addEventListener('click', function () {
      loadPlayerWithMode(false);
    });
    document.getElementById('btn-player').addEventListener('click', function () {
      loadPlayerWithMode(true);
    });
    loadPlayerWithMode(false);
  });
})();
```

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

### Initialize Video Player with Playlist

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/es-modules/playlist.html

Initializes a Cloudinary Video Player and configures it to use a playlist. Options include auto-advance, repeat, and presenting upcoming videos. This example demonstrates both horizontal and vertical playlist widget layouts.

```javascript
import { videoPlayer } from 'cloudinary-video-player';
import 'cloudinary-video-player/cld-video-player.min.css';

const source1 = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about snow horses' } };
const source2 = { publicId: 'dirt_bike', info: { title: 'Dirt Bike', subtitle: 'A short video of dirt bikes' } };
const source3 = { publicId: 'marmots', info: { title: 'Marmots' } };

const playlistSources = [source1, source2, source3];
const playlistOptions = { autoAdvance: true, repeat: true, presentUpcoming: 8 };

const playerHorizontal = videoPlayer('player-horizontal', {
  cloudName: 'demo',
  playlistWidget: {
    direction: 'horizontal',
    total: 4
  }
});

playerHorizontal.playlist(playlistSources, playlistOptions);

const playerVertical = videoPlayer('player-vertical', {
  cloudName: 'demo',
  playlistWidget: {
    direction: 'vertical',
    total: 4
  }
});

playerVertical.playlist(playlistSources, playlistOptions);
```

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

### Configure Video Player for Downloads (JavaScript)

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/share-plugin.html

Initialize a Cloudinary video player with the `download: true` option in the player configuration to enable the download button for all video sources. This is suitable for progressive MP4s.

```javascript
const player1 = cloudinary.videoPlayer('player1', {
  cloudName: 'demo',
  transformation: { effect: 'saturation:-100' },
  download: true, // enables download button for all sources
  publicId: 'snow_horses',
});
```

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

### Define Interaction Areas with Custom Template and Logic

Source: https://github.com/cloudinary/cloudinary-video-player/blob/master/docs/interaction-area.html

Utilize a predefined 'portrait' template for interaction areas and implement custom logic within the onClick handler. This example conditionally opens a new window for a 'middle' item or zooms for others.

```javascript
var videoZoomSources = {
  top:'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4',
  middle:'https://www2.hm.com/en_in/productpage.0687948004.html',
  bottom:'https://res.cloudinary.com/eran2903/video/upload/w_540,x_1260,y_3100,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
}
var player2 = cloudinary.videoPlayer('custom-template', playerOption);
player2.source('video-player/girl_in_a_dress', {
  interactionAreas: {
    enable: true,
    template: 'portrait',
    onClick:function (event) {
      var src = videoZoomSources[event.item.id];
      if(event.item.id === 'middle'){
        if(window.confirm('Do you like this shirt ?')) {
          window.open(src, '_blank').focus();
        }
      } else {
        event.zoom(src)
      }
    }
  }
});
```

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

### Custom Player Theming with HTML Data Attributes

Source: https://context7.com/cloudinary/cloudinary-video-player/llms.txt

Customize player colors globally using JavaScript or per-player via the `data-cld-colors` HTML attribute. This example shows how to apply custom base, accent, and text colors to individual video elements.

```html
<!-- Per-player colors via HTML data attribute -->
<video
  id="player-1"
  muted
  class="cld-video-player cld-fluid cld-video-player-skin-dark"
  data-cld-source='{"publicId":"sea_turtle","info":{"title":"Sea Turtle"}}'
  data-cld-colors='{"base":"#111","accent":"#03a9f4","text":"#ffeb3b"}'>
</video>

<video
  id="player-2"
  muted
  class="cld-video-player cld-fluid cld-video-player-skin-light"
  data-cld-source='{"publicId":"dog","info":{"title":"Dog"}}'
  data-cld-colors='{"base":"#0b602b","accent":"#cddc39","text":"#fff"}'>
</video>
```