CldVideoPlayer Examples

Basic Usage

Standard Cloudinary Video Player with playback.

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
/>

• Expand Snippet
• Collapse Snippet

Playback

Adaptive Bitrate Streaming (ABR)

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  sourceTypes={['hls']}
  transformation={{
    streaming_profile: 'hd',
  }}
/>

• Expand Snippet
• Collapse Snippet

Picture-in-Picture

Utilizes the browser’s Picture-in-Picture API to create a floating video on top of other windows.

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  pictureInPictureToggle
/>

• Expand Snippet
• Collapse Snippet

Player Customization

Chapters & Selector

Adding a button to select chapters.

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  width="4096"
  height="2160"
  src="<Public ID>"
  chapters={{
    0: "Chapter 1",
    6: "Chapter 2",
    9: "Chapter 3"
  }}
  chaptersButton
/>

• Expand Snippet
• Collapse Snippet

Colors & Font

Changing the player theme using colors and fonts.

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  width="4096"
  height="2160"
  src="<Public ID>"
  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
/>

• Expand Snippet
• Collapse Snippet

Logo

Adding a custom logo to the player chrome

---
import { CldVideoPlayer } from 'astro-cloudinary';
import { getCldImageUrl } from 'astro-cloudinary/helpers';
---
<CldVideoPlayer
  width="4096"
  height="2160"
  src="<Public ID>"
  logo={{
    imageUrl: getCldImageUrl({
      src: '<Your Public ID>'
    }),
    // imageUrl: '<Your Image URL',
    onClickUrl: '<Your URL>'
  }}
/>

• Expand Snippet
• Collapse Snippet

Poster URL

Allows you to change the poster used for the player.

---
import { CldVideoPlayer } from 'astro-cloudinary';
import { getCldImageUrl } from 'astro-cloudinary/helpers';
---
<CldVideoPlayer
  width="4096"
  height="2160"
  src="<Public ID>"
  poster={getCldImageUrl({ src: '<Your Public ID>', grayscale: true })}
  // poster={getCldImageUrl({ src: '<Your Public ID>', assetType: 'video' })}
  // poster="<Your Remote URL>"
/>

• Expand Snippet
• Collapse Snippet

Poster Transformations

Adding effects to the video’s auto-generated thumb

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  width="4096"
  height="2160"
  src="<Public ID>"
  poster={{
    tint: 'equalize:80:blue:blueviolet'
  }}
/>

• Expand Snippet
• Collapse Snippet

Transformations

Cropping & Resizing

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  width="500"
  height="500"
  src="<Public ID>"
  transformation={{
    width: 500,
    height: 500,
    crop: 'fill',
    gravity: 'auto'
  }}
/>

• Expand Snippet
• Collapse Snippet

Image Overlays

Place an image over the video (Ex: watermarks).

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  transformation={{
    overlay: '<Your Public ID>',
    width: 150,
    gravity: "south_east",
    x: 50,
    y: 50,
    opacity: 80
  }}
/>

• Expand Snippet
• Collapse Snippet

Advanced

Localization

Provides localization options for player labels.

Uses Video.js JSON format to provide labels.

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  width="4096"
  height="2160"
  src="<Public ID>"
  language="es"
  languages={{
    es: {
      Play: "Reproducción",
      "Play Video": "Reproduce el Video",
      Pause: "Pausa",
      "Current Time": "Tiempo reproducido",
      Duration: "Duración total",
      "Remaining Time": "Tiempo restante",
      "Stream Type": "Tipo de secuencia",
      LIVE: "DIRECTO",
      Loaded: "Cargado",
      Progress: "Progreso",
      Fullscreen: "Pantalla completa",
      "Non-Fullscreen": "Pantalla no completa",
      Mute: "Silenciar",
      Unmute: "No silenciado",
      "Playback Rate": "Velocidad de reproducción",
      Subtitles: "Subtítulos",
      "subtitles off": "Subtítulos desactivados",
      Captions: "Subtítulos especiales",
      "captions off": "Subtítulos especiales desactivados",
      Chapters: "Capítulos",
      "Close Modal Dialog": "Cerca de diálogo modal",
      "You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
      "A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
      "The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
      "The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
      "No compatible source was found for this video.": "No se ha encontrado ninguna fuente compatible con este vídeo."
    }
  }}
/>

• Expand Snippet
• Collapse Snippet

Playback Events

Callbacks for player events.

Note

The player instance is also passed in the callback function:

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  id="video-player-events"
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
/>

<script>
const videoPlayer = document.querySelector(`#video-player-events`);

if ( videoPlayer ) {
  videoPlayer.addEventListener('cldvideoplayer:loadedmetadata', ((e: CustomEvent<{ detail: {} }>) => {
    console.log('cldvideoplayer:loadedmetadata', e.detail)
  }) as EventListener);

  videoPlayer.addEventListener('cldvideoplayer:play', ((e: CustomEvent<{ detail: {} }>) => {
    console.log('cldvideoplayer:play', e.detail)
  }) as EventListener);

  videoPlayer.addEventListener('cldvideoplayer:pause', ((e: CustomEvent<{ detail: {} }>) => {
    console.log('cldvideoplayer:pause', e.detail)
  }) as EventListener);
};
</script>

• Expand Snippet
• Collapse Snippet