Getting Started with CldVideoPlayer

The CldVideoPlayer component helps to embed Cloudinary videos using the Cloudinary Video Player giving you a full customizable experience for your player.

Basic Usage

The basic required props include width, height, and src:

import { CldVideoPlayer } from 'svelte-cloudinary';

<CldVideoPlayer
  width="1920"
  height="1080"
  src="<Public ID>"
/>

Customization

You can further take advantage of features like customizing your player:

<CldVideoPlayer
  width="1620"
  height="1080"
  src="<Public ID>"
  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
/>

Player Events

Or listening to player events for advanced interactions with:

<CldVideoPlayer
  width="600"
  height="600"
  src="<Cloudinary URL>"
  onMetadataLoad={({ player }) => {
    console.log(`duration: ${player.duration()}`);
  }}
  onPause={({ player }) => {
    console.log(`current time: ${player.currentTime()}`);
  }}
/>

Learn More about CldVideoPlayer

• Configuration
• Examples