Cloudinary offers powerful APIs for uploading, managing, transforming, and delivering images and videos, enabling developers to treat media as code and to capitalize on media’s full potential. However, performing simple editing tasks with APIs and SDKs might be too overwhelming for nondevelopers, who might prefer UI-based capabilities instead.
Examples of simple video-editing tasks are trimming videos based on time offsets, merging videos, adding text or image overlays to videos, etc. Currently, those capabilities are not part of Cloudinary’s digital asset management (DAM) toolset. To perform those tasks, nondevelopers must construct delivery URLs, such as the one below, which concatenates two clipped videos with an image at the start and another at the end:
As the number of video clips for trimming or merging increases, the complexity involved in manually building delivery URLs also intensifies. As a remedy, we recently built a simple tool that uses Cloudinary’s transformation APIs behind the scenes via our JavaScript SDK to help you quickly perform these two editing tasks:
- Trim videos by specifying the start time and the end time.
- Join multiple videos.
You can also do the following with this new tool:
- Rearrange the order of the videos.
- Add images to a video for display for x seconds.
- Add a global text overlay or have it overridden for specific video clips.
- Choose the font, color, and size of the text overlay.
- Specify the gravity, i.e., the position of the text in the video.
- Add an image and specify its size as an overlay.
- Specify the image’s gravity, i.e., its position in the video.
- Adjust the image’s brightness, contrast, saturation, gamma, and vignette.
- Make the video transparent or untransparent (if supported by the browser).
The sections below describe how to install and use the tool.
This tool is a front-end-only app written in HTML and JS with no server required. Download the code to your local machine. For testing, you can use the hosted demo.
Let’s take an example of a student’s science homework. Say, the required images and videos are already in DAM storage and tagged as ‘my_homework’. Check out the entire collection here.
The student can search for videos manually from his Cloudinary account’s Media Library or under the Search by Tag option. He can add images to a video under Search by Tag, but not from the Media Library.
Feel free to fork the source code and add capabilities, e.g., one that enables selection of images from the Media Library also.
The video below shows you how to search for videos and images based on the tag my_homework.
To trim videos and add images for video stitching, the student would take these steps:
- Specify the start and end offset to clip the video that is active in the video player.
- Select images from the image-search results and add them for video stitching.
- Drag and drop the videos to arrange them in the correct order.
See the video below for a demo.
The student can either enable a global text overlay for the entire video or add text overlays to individual videos or images. He can also configure the text font, size, color, and gravity, i.e., the position of the text overlay in the video, such as northwest, center, etc., and adjust the position by specifying x-y offsets.
The video below shows you how to add a date as the text overlay at the bottom-right corner of a video.
You can add a logo or any image to video output by choosing the image from prior image-search results or from the Media Library. Additionally, you can configure the image size and gravity, i.e., the position of the image overlay in the video.
The demo below shows you how to add the Cloudinary logo as an overlay to our concatenated video, resize the logo, and add it as a transparent image.
Here are more examples:
- Demo 1: Merge an image and two trimmed videos, displaying the image in the first two seconds.
- Demo 2: Merge two clipped videos, rearrange their order, add a text overlay, and adjust the brightness.
- Demo 3: Merge three clipped videos, add two images in between the videos, and then add an image overlay.
The features in this simple video-editing tool are a subset of the robust capabilities that Cloudinary offers for video editing. We plan to add more features to the Cloudinary DAM UI in the near future so that you can transform videos within that UI. Until then, we’ll incorporate more common video-transformation features as part of the above tool.
Again, you are welcome to clone and modify the code, create personalized versions for your use cases and apps, and send us pull requests if your additions are worth sharing. Above all, feel free to suggest enhancements for the tool. We’d appreciate your insight.
