Creating A Cloudinary Vue Component

Creating A Cloudinary Vue Component While React.js caught a lot of attention during the latest wave of JavaScript frameworks, Vue.js is discreetly become a favorite of many developers who find React too complex and do not want to deal with webpack.Avec tooling with Vue, you can just include the JavaScript View file in the page, create some templates, and you're on your path – a return of the days of original JavaScript infrastructure

Cloudinary is a formidable multimedia storage and distribution service, providing APIs in almost every language to help developers use their service, including Node.js, Python, PHP, React, and more. It meant consulting View and thinking about the best way to do it than creating media-centric components with the help of Cloudinary's API. My goal was to create a video component that reflects what you see on many video-centric sites: load a thumbnail, preview overflight playback, and finally play the video when you click on it. Let's go!

Quick note: the Vue.js component I'm creating for this post could be optimized (use a single element

Component View

I wanted to create a component because, just like React, they are easily contained and reusable. Let's start by taking a look at the component model.

Component Model

See the skeleton HTML will give an overview of what we will handle:

 Video excerpt

Our component has four immediate child elements: three elements that are displayed or displayed according to a CSS state, and an SVG "play" icon. The states are:

(default) Display a thumbnail image / poster for the video
(hover) Show aggregated and collated video preview (much like this article )
(active) Displays the entire video

These states will be manipulated by component methods changing the root element status attribute; their visibility will be manipulated by a CSS selector corresponding to each state.

Component properties

In the interest of keeping this component simple, I limit the number of properties to those really necessary: ​​

Vue.component (& # 39; cloud-video & # 39 ;, {
the accessories: {
account: {type: String, required: true, default: "david-wash-blog",
alias: {type: string, required: true},
// These can be strings as they come in attributes
width: {type: String, default: 400},
height: {type: String, default: 300}

Realize that the Cloudinary transformation API is so powerful that I could add dozens of properties to exploit all its powers, but this post would be like a novel! There are some other properties that require calculated values ​​based on simple properties, so let's also create these:

calculated: {
dimensions: function () {
returns `width: $ {this.width} px; height: $ {this.height} px; `;
displays: function () {
go back to$ {this.account} / video / upload / $ {this.alias} .jpg`;
preview: function () {
go back to${this.account}/video/upload/so_0,of_2/l_video:${this.alias},fl_splice,so_12/of_2/fl_layer_apply/l_video:${this. alias}, fl_splice, so_24 / du_2 / fl_layer_apply / l_video: $ {this.alias}, fl_splice, so_36 / du_2 / fl_layer_apply / l_video: $ {this.alias}, fl_splice, so_48 / du_2 / fl_layer_apply / l_video: $ {this .alias}, fl_splice, so_80 / du_2 / fl_layer_apply / $ {this.alias} .mp4`;
fullVideo: function () {
return `$ {this.account} / video / upload / $ {this.alias} .mp4`;

Calculated properties can reference simple properties, which I use a lot in this component.

Component Methods

Component methods will be used to trigger features during the mouseenter, mouseleave, and click events of our component:

methods: {
play: function () {
// Hide the preview
this.hidePreview ();
// Set the status to "play" to display the complete video element
this. $ el.setAttribute (& # 39 ;, & quot ;, & quot; playing & # 39;);
// Set the complete src video element
this. $ refs.fullVideo.src = this.fullVideo;
showPreview: function () {
// If the full video is loaded and playing, skip this event
if (this. $ el.getAttribute (& # 39; state & # 39;) === & # 39; play & # 39;) {
come back;
// Update the visibility status of the CSS child element / component
this. $ el.setAttribute (& # 39 ;, & # 39 ;, preview & # 39;);
// Set the source of the preview video
this. $ refs.previewVideo.src = this.preview;
hidePreview: function () {
// If the full video is loaded and playing, skip this event
if (this. $ el.getAttribute (& # 39; state & # 39;) === & # 39; play & # 39;) {
come back;
// Update the visibility status of the CSS child element / component
this. $ el.setAttribute (& # 39 ;, & # 39;; & # 39;);
// Stop the video
this. $ refs.previewVideo.pause ();

Although I use the attribute state, I realize that I do not use Flux or any other state management utility – the attribute represents simply which of the three states of the component should be displayed or hidden.

CSS component

The CSS required for this component seems to be a lot but it mainly handles simple layout as well as "state": show and hide each child element of the component as needed:

.cloudinary-video-item {
position: relative;

.cloudinary-video-item> div {
position: absolute;
at the top: 0;
left: 0;

.cloudinary-video-item img {
viewing block;

.cloudinary-video-item svg {
position: absolute;
above: 40%;
left: 45%;
cursor: pointer;
opacity: 0.6;
.cloudinary-video-item svg: hover {
opacity: 0.9;

/ * Default state / image only * /
.cloudinary-video-item .cloudinary-video-item-active,
.cloudinary-video-item .cloudinary-video-item-video {
display: none;

/ * Preview state * /
.cloudinary-video-item [state=preview] .cloudinary-video-item-active {
viewing block;
.cloudinary-video-item [state=preview] .cloudinary-video-item-image {
display: none;

/ * Read status * /
.cloudinary-video-item [state=playing] .cloudinary-video-item-video {
viewing block;
.cloudinary-video-item [state=playing] .cloudinary-video-item-image,
.cloudinary-video-item [state=playing] .cloudinary-video-item-active,
.cloudinary-video-item [state=playing] svg {
display: none;

There is a good amount there, but minified would leave almost no imprint!

Use of the component

With each accessory in the accessories containing a default value, except for the support alias, of course, the use of the component can be simple:

And finally, adding a new call from Vue to remove everything:

new View ({el: # video-holder}}

It's so easy to create a Vue.js component for your Cloud media!


Creating a view component using multiple types of media generated from a single source was easy thanks to Cloudinary . Cloudinary generated the image of the sample, the video poster, the video preview, and quickly delivered these resources as well as the source video. Vue's simple API made creating the Cloudinary component fun and lacking in code. I can not wait to play with Vue and Cloudinary to create truly powerful multimedia components!

Load More Related Articles
Load More By Amit Ghosh
Load More In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *