Getting Started with CldVideoPlayer

Basic Usage

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

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

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

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

Or listening to player events for advanced interactions with:

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

Learn More about CldVideoPlayer

Configuration
Examples

Last updated on April 3, 2023

Examples Configuration