Video transformations (video tutorial)

Overview

This tutorial shows how to build an e-commerce video using Node.js showing products being used in different ways. This step-by-step guide will show you how to chain the transformations, adding one transformation at a time.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:14	In this video, you'll see some examples of how Cloudinary's transformations and AI capabilities can help you manage and edit your videos, programmatically and on the fly.

Get the delivery URL of a video stored in Cloudinary

0:25	Use the url method of the Node.js SDK that takes an asset's public ID and returns its delivery URL. Specify the video's public ID and set the resource_type to video.

Step 1 - Add a transformation to trim and resize the video

1:10	To trim and resize the video, add a transformation object. Specify a duration, for example, 5 seconds, and crop to width of 250 pixels with an aspect ratio of 3:4. Set the crop parameter to fill so that your video will be cropped to fit the specified dimensions without distortions.

Step 2 - Change the video focal point

1:54	To center the face in the video, set the gravity parameter. In this case, we'll set it to north, to focus the video toward the top.

Step 3 - Concatenate another video

2:23	To concatenate another video, specify its public ID as an overlay, and use the splice flag to indicate that it should be concatenated, and not overlaid. The concatenated video must be resized to the same dimensions as the base video. Add the duration parameter to trim the concatenated video. The layer_apply flag indicates the end of the overlay transformation.

Step 4 - Add captions

3:01	Add an SRT file stored in Cloudinary as an overlay, specifying its public ID. Set the resource_type to subtitles, and end the overlay transformation with the layer apply flag.

Step 5 - Add background music

3:16	Add a music clip stored in Cloudinary as an overlay, specifying its public ID. End the overlay transformation with the layer_apply flag.

Step 6 - Add a watermark

3:39	Brand your video by overlaying an image saved in Cloudinary as a watermark. Place it in the top right corner by setting the gravity parameter to north_east, with right and top margins of 10 pixels (x:10, y:10). Size the watermark to a width of 40 pixels, and set its opacity to 80%. End the overlay transformation with the layer_apply flag. Here's the finished code:

More information

4:44	Check out our Transformation reference for a listing of all the transformations you can apply to your videos. Filter the page to see only the transformations that are relevant to videos using the asset type filter on the top right of the page. See the Node.js SDK documentation, especially the quick start to get up and running in minutes.

---

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.