CldVideoPlayer

The usage

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:

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

Customization

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

<template>
  <CldVideoPlayer
    width="1620"
    height="1080"
    src="videos/mountain-stars"
    :colors="colors"
    fontFace="Source Serif Pro"
  />
</template>

<script setup lang="ts">
  const colors = {
    accent: "#ff0000",
    base: "#00ff00",
    text: "#0000ff",
  };
</script>

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()}`)"
/>

Picture in Picture

Picture-in-picture helps your viewers continue their multitasking agenda and maintain context while navigating different apps or interfaces using picture-in-picture functionality.

<CldVideoPlayer
  width="600"
  height="600"
  src="<Cloudinary URL>"
  pictureInPictureToogle
/>

Chapters

Adding a button to select chapters (you can pass chapters prop as a boolean if the video already has chapters as explained here).

<script setup lang="ts">
  const chapters = {
    0: "Chapter 1",
    6: "Chapter 2",
    9: "Chapter 3",
  };
</script>

<template>
  <CldVideoPlayer
    width="600"
    height="600"
    src="<Cloudinary URL>"
    :chapters="chapters"
    chaptersButton
  />
</template>

Text Tracks

The textTracks prop allows you to add captions or subtitles to the player. Each Text Track is an object containing details about where the captions or subtitles should be loaded from as well as any customization of that track.

<script setup lang="ts">
  const textTracks = {
    captions: {
      label: "English",
      language: "en",
      default: true,
      url: "https://res.cloudinary.com/<Cloud Name>/raw/upload/<FileName>.vtt",
    },
  };
</script>

<template>
  <CldVideoPlayer
    width="600"
    height="600"
    src="<Cloudinary URL>"
    :textTracks="textTracks"
  />
</template>

Raw Transformations

It is a common thing to add custom video transformations like fading effect in and out which can be done like following:

<template>
  <CldVideoPlayer
    width="600"
    height="600"
    src="<Cloudinary URL>"
    :transformation="{ raw_transformation: 'e_fade:2000,e_fade:-2000' }"
  />
</template>

Learn more on the Video Player Reference or the Subtitles and Captions guide.

General Props

Colors Prop

The colors prop takes an object that can control what colors are used in the player:

Learn more about the color scheme options and how they're used on the Cloudinary docs.

Event Props

The event props allow you to pass in a function that is called whenever the associated event occurs.

For instance, in order to trigger an event whenever a video is paused:

<CldVideoPlayer
  :onPause="({ player }) => console.log(`current time: ${player.currentTime()}`)"
/>

Logo Prop

The logo prop gives the option to customize the player's logo.

logo defaults to true, showing the Cloudinary logo and linking to https://cloudinary.com when clicked.

When logo is set to false, no logo will be displayed.

To customize the logo, the following options are available in the form of an object:

Ref Props

The playerRef and videoRef props give you the ability to pass in your own ref to gain access to both the Player instance as well as the HTML video element on which the player is mounted.

To do this, create a new Ref instance and pass as ref to the CldVideoPlayer component:

<script setup lang="ts">
const cldVideoPlayerRef = ref();

console.log(cldVideoPlayerRef);
// will output { playerRef, videoRef }
</script>

<template>
  <CldVideoPlayer ref="cldVideoPlayerRef" ... />
</template>