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

The basic required props include width, height, and src:

import { CldVideoPlayer } from 'svelte-cloudinary';

<CldVideoPlayer width="1920" height="1080" src="<Public ID>" />;

Customization

You can further take advantage of features like customizing your player:

<CldVideoPlayer
	width="1620"
	height="1080"
	src="<Public ID>"
	colors={{
		accent: '#ff0000',
		base: '#00ff00',
		text: '#0000ff'
	}}
	fontFace="Source Serif Pro"
/>

Player Events

Or listening to player events for advanced interactions with:

<CldVideoPlayer
	width="600"
	height="600"
	src="<Cloudinary URL>"
	onMetadataLoad={({ player }) => {
		console.log(`duration: ${player.duration()}`);
	}}
	onPause={({ player }) => {
		console.log(`current time: ${player.currentTime()}`);
	}}
/>

Learn More about CldVideoPlayer

• Configuration
• Examples