Getting Started with CldVideoPlayer
The CldVideoPlayer component helps to embed Cloudinary videos using the Cloudinary Video Player giving you a full customizable experience for your player.
Basic Usage
To add a video player, use the CldVideoPlayer component with the basic required props
width
, height
, and src
.
---import { CldVideoPlayer } from 'astro-cloudinary';---<CldVideoPlayer src="<Public ID>" width="<Width>" height="<Height>"/>
Customization
You can further take advantage of features like customizing your player:
---import { CldVideoPlayer } from 'astro-cloudinary';---<CldVideoPlayer src="<Public ID>" width="<Width>" height="<Height>" colors={{ accent: '#ff0000', base: '#00ff00', text: '#0000ff' }} fontFace="Source Serif Pro"/>
Player Events
For listening to player events for advanced interactions with:
---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>