• Components
• <CldVideoPlayer />
• Examples

CldVideoPlayer Examples

Effects

• Default

  width="1620"
  height="1080"
  src={`${process.env.VIDEOS_DIRECTORY}/mountain-stars`}
• Custom Player Colors & Font

  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
• Custom Logo

  logo={{
    imageUrl: 'https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/v1676058142/assets/space-jelly-cosmo-helmet.svg',
    onClickUrl: 'https://spacejelly.dev'
  }}
• With Ref on Callback

  playerRef={myPlayerRef}
  onMetadataLoad={() => {
    console.log('metadata-loaded');
    console.log(`duration: ${myPlayerRef.current.duration()}`);
  }}
  Note: the player instance is also passed in the callback function:

  onMetadataLoad={({ player }) => {
    console.log('metadata-loaded');
    console.log(`duration: ${player.duration()}`);
  }}