CldVideoPlayer Examples

Examples

• Default

  
  

  Basic settings to display a video.

  width="1620"
  height="1080"
  src="videos/mountain-stars"

• Adaptive Streaming

  
  

  Basic settings to display a video.

  width="1620"
  height="1080"
  src="videos/mountain-stars"
  transformation={{
    streaming_profile: 'hd',
  }}
  sourceTypes={['hls']}

• Crop & Resize

  
  

  Basic settings to display a video.

  width="1620"
  height="1080"
  src="videos/dog-running-snow"

• Transformation: overlay

  
  

  Adding a watermark to a video.

  src="videos/mountain-stars"
  transformation={{
    overlay: "assets:space-jelly-cosmo-helmet",
    width: 150,
    gravity: "south_east",
    x: 50,
    y: 50,
    opacity: 40
  }}

• Custom Player Colors & Font

  
  

  Changing the player theme using colors and fonts

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

• Custom Logo

  
  

  Adding a custom logo to the player chrome

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

• Poster

  
  

  Adding effects to the video's auto-generated thumb

  poster={{
    tint: 'equalize:80:blue:blueviolet'
  }}
  
  

  Specifying a remote URL

  poster="https://...com/image.jpg"
  
  

  Using a Cloudinary image with effects

  poster={{
    src: `${process.env.IMAGES_DIRECTORY}/turtle`,
    tint: 'equalize:80:blue:blueviolet'
  }}

• Localization

  
  

  Provide localization options for player labels.

  language="es"
  languages={{
    es: {
      Play: "Reproducción",
      Pause: "Pausa",
      "Current Time": "Tiempo reproducido",
      ...
    }
  }}

  Uses Video.js JSON format (opens in a new tab) to provide labels.

• With Ref on Callback

  
  

  Using a ref to access the player instance

  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()}`);
  }}