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>