Getting Started with CldVideoPlayer
The CldVideoPlayer component helps to embed Cloudinary videos using the Cloudinary Video Player (opens in a new tab) 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 and import the Video Player CSS on the page
that you'll be using the component.
import { CldVideoPlayer } from 'next-cloudinary';
import 'next-cloudinary/dist/cld-video-player.css';
<CldVideoPlayer
width="1920"
height="1080"
src="<Public ID>"
/>Using the App Router in Next.js 13+? Add the "use client" directive at the top of your file.
Customization
You can further take advantage of features like customizing your player:
import { CldVideoPlayer } from 'next-cloudinary';
import 'next-cloudinary/dist/cld-video-player.css';
<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:
import { CldVideoPlayer } from 'next-cloudinary';
import 'next-cloudinary/dist/cld-video-player.css';
<CldVideoPlayer
width="1620"
height="1080"
src="<Cloudinary URL>"
onMetadataLoad={({ player }) => {
console.log(`[CldVideoPlayer] Duration: ${player.duration()}`);
}}
onPause={({ player }) => {
console.log(`[CldVideoPlayer] Current Time: ${player.currentTime()}`);
}}
/>See your browser's web console to preview the information logged in the above callbacks.