CldVideoPlayer.vue 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" /> < script setup lang = "ts" > const colors = { accent: "#ff0000" , base: "#00ff00" , text: "#0000ff" , }; 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()}`)" /> Check the browser console after playing and pausing the video for logs that were added to the component. General Props Prop Name Type Default Description Example autoPlay string "never" When, if, should the video automatically play. See autoplayMode in Video Player docs "on-scroll" className string - Additional class names added to the video container "my-video-player" colors object See below Player chrome colors See Colors Below controls boolean true Show player controls true fontFace string - Player UI font. Uses Google Fonts. "Source Serif Pro" height string/number - Required : Player height 1080 id string - Video instance ID, defaults to src value "my-video" logo boolean/object See Below Logo to display in Player UI See Logo Below loop boolean false Loop the video true muted boolean false Load muted by default true onDataLoad Function - Triggered when video metadata is loaded See Events Below onError Function - Triggered on video error See Events Below onMetadataLoad Function - Triggered when video data is loaded See Events Below onPause Function - Triggered on video pause See Events Below onPlay Function - Triggered on video play See Events Below onEnded Function - Triggered when video has ended play See Events Below playerRef Ref - React ref to access Player instance See Refs Below showLogo boolea true Show the Cloudinary logo on Player false src string - Required : Video public ID "videos/my-video" transformation object/array - Transformations to apply to the video { width: 200, height: 200, crop: 'fill' } version string "1.9.4" Cloudinary Video Player version "1.9.4" videoRef Ref - React ref to access video element See Refs Below width string/number - Required : Player width 1920 Colors Prop The colors prop takes an object that can control what colors are used in the player: Prop Name Type Default Description accent string "#FF620C" Seek bar, volume control and for highlighting interactions. base string "#000000" Player controls bar, information bar, central play button, and right-click context menu. text string "#FFFFFF" All the text and icons that are present within the video player UI. 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: Prop Name Type Default Description imageUrl string - Image URL for player logo. onClickUrl string - URL to browse to on logo click. 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 that in as the value of the prop: const myVideoRef = ref(); ... < CldVideoPlayer : videoRef = " myVideoRef " ... /> .dark .ct-948368{color:#E1E4E8;} .ct-948368{color:#24292E;} .dark .ct-749307{color:#FDAEB7;font-style:italic;} .ct-749307{color:#B31D28;font-style:italic;} .dark .ct-970614{color:#B392F0;} .ct-970614{color:#6F42C1;} .dark .ct-497092{color:#9ECBFF;} .ct-497092{color:#032F62;} .dark .ct-680237{color:#85E89D;} .ct-680237{color:#22863A;} .dark .ct-135336{color:#F97583;} .ct-135336{color:#D73A49;} .dark .ct-484930{color:#79B8FF;} .ct-484930{color:#005CC5;}

Options

cloudName

`cloudName`