Skip to content

CldVideoPlayer Examples

Basic Usage

Standard Cloudinary Video Player with playback.

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

Playback

Adaptive Bitrate Streaming (ABR)

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

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
/>

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
/>

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"
/>

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>'
}}
/>

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>"
/>

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'
}}
/>

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'
}}
/>

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
}}
/>

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."
}
}}
/>

Playback Events

Callbacks for player events.

---
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>