CldVideoPlayer Examples

Basic Usage

Standard Cloudinary Video Player with playback.

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="default"
  width="1620"
  height="1080"
  src="<Your Public ID>"
/>

Playback

Adaptive Bitrate Streaming (ABR)

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="adaptive-bitrate-streaming"
  width="1620"
  height="1080"
  src="<Your Public ID>"
  transformation={{
    streaming_profile: 'hd',
  }}
  sourceTypes={['hls']}
/>

Picture-in-Picture

Utilizes the browser's Picture-in-Picture API to create a floating video on top of other windows.

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="picture-in-picture"
  width="1620"
  height="1080"
  src="<Your Public ID>"
  pictureInPictureToggle
/>

Player Customization

Chapters & Selector

Adding a button to select chapters.

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="chapters-selector"
  width="4096"
  height="2160"
  src="<Your 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 'next-cloudinary';
 
<CldVideoPlayer
  id="custom-colors-font"
  width="4096"
  height="2160"
  src="<Your Public ID>"
  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
/>

Logo

Adding a custom logo to the player chrome

import { CldVideoPlayer, getCldImageUrl } from 'next-cloudinary';
 
<CldVideoPlayer
  id="custom-logo"
  width="4096"
  height="2160"
  src="<Your 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, getCldImageUrl } from 'next-cloudinary';
 
<CldVideoPlayer
  id="poster-custom-url"
  width="4096"
  height="2160"
  src="<Your Public ID>"
  poster={getCldImageUrl({ src: '<Your Public ID>' })}
  // poster="<Your Remote URL>"
/>

Poster Transformations

Adding effects to the video's auto-generated thumb

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="poster-transformations"
  width="4096"
  height="2160"
  src="<Your Public ID>"
  poster={{
    tint: 'equalize:80:blue:blueviolet'
  }}
/>

Transformations

Cropping & Resizing

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="cropping-resizing"
  width="500"
  height="500"
  src="<Your Public ID>"
  transformation={{
    width: 500,
    height: 500,
    crop: 'fill',
    gravity: 'auto'
  }}
/>

Image Overlays

Place an image over the video (Ex: watermarks).

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="image-overlays"
  width="1620"
  height="1080"
  src="<Your Public ID>"
  transformation={{
    overlay: '<Your Public ID>',
    width: 150,
    gravity: "south_east",
    x: 50,
    y: 50,
    opacity: 80
  }}
/>

Text Overlays

Place a text over the video.

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="text-overlays"
  width="1620"
  height="1080"
  src="<Your Public ID>"
  transformation={{
    color: 'white',
    overlay: {
      font_family: "Source Sans Pro",
      font_size: 150,
      font_weight: "bold",
      text: "Zen"
    },
    gravity: "center",
    opacity: 80
  }}
/>

Advanced

Localization

Provides localization options for player labels.

Uses Video.js JSON format (opens in a new tab) to provide labels.

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  id="localization"
  width="4096"
  height="2160"
  src="<Your 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.

Note: the player instance is also passed in the callback function:

import { CldVideoPlayer } from 'next-cloudinary';
 
const myPlayerRef = useRef();
 
<CldVideoPlayer
  playerRef={myPlayerRef}
  id="player-events"
  width="4096"
  height="2160"
  src="<Your Public ID>"
  onMetadataLoad={() => {
    console.log('[Cloudinary Video Player] metadata-loaded');
    console.log(`[Cloudinary Video Player] duration: ${myPlayerRef.current.duration()}`);
  }}
  onPlay={() => {
    console.log('[Cloudinary Video Player] play');
  }}
/>

Transformations Basic Usage