It’s indisputable that video is crucial to the success of all e-commerce companies. The numbers make this clear. A customer survey by Wyzowl found that:
- 73 percent preferred learning about a product or service through a short video.
- 88 percent were convinced to buy a product or service by watching a brand’s video.
As anyone who has worked with media knows, creating quality, on-brand, and high-converting video is time-consuming and expensive. Videos can be difficult to disseminate because of the channel, file format, device type, or bandwidth. And, after all the challenges you face when developing video content, you’re left with the cold, hard fact that videos age quickly.
For audiences constantly demanding new content, it’s almost impossible for creative teams to keep up. To produce fresh, captivating branded content at this rapid pace, you must explore the world of programmable media.
Programmable media helps your business in several different ways. It allows you to automate several editing tasks handled by your creative team, allowing you to create video content faster. It also allows you to do more with the video you do have. Cloudinary’s Video API lets you rework and repurpose video into new assets while maintaining your brand look and feel. This programmatic approach enables you to produce fresh content at scale and increases your speed to market.
With the Cloudinary Video API, you can generate video quickly, increasing your speed to market. Companies like Bleacher Report use Cloudinary to make wide-reaching, captivating video content. This hands-on article will show you how you can, too.
Cloudinary’s composable architecture approach to technology means that no matter your tech stack, you can implement Cloudinary’s video tools into your flow without trouble. Just call the Video API from any backend language.
You can apply Cloudinary’s Video API to any video you’ve uploaded to Cloudinary. It’s a simple process. Start by signing up for a free Cloudinary account. From there, you can obtain your API credentials, including your cloud name identifier, API key, and API secret. You use these credentials to configure your software development kit (SDK).
Cloudinary offers several SDKs for different languages, each with a unique quick-start guide. This demonstration uses the Node.js SDK. Different SDKs require different credentials, so be sure to configure your SDK properly.
Once the configuration is complete, you can access Cloudinary Video API tools. Uploading and transforming a video can now be done easily and within your code. For instance, the syntax to upload a video named demo.mp4 is as simple as this:
cloudinary.v2.uploader.upload("demo.mp4.jpg").then(result=>console.log(result));
Note: For this tutorial, you’ll use the Video API on pre-uploaded media. Cloudinary supports today’s most popular frameworks and languages. It’s also possible to apply various video effects on upload.
Cloudinary’s video transformations allow you to do more with your existing video by changing the video using dynamic URLs in your code. Video transformations provide a scalable, automated approach to video editing that allows you to get the most out of your digital assets.
With Cloudinary’s dynamic URL transformations, you can easily adjust your video content to meet the required formats, styles, and dimensions. Using these URLs in your code or via Cloudinary’s SDKs, you can apply visual enhancements that make your video content pop, like adding text overlay or reversing the video.
One video transformation you can perform is adding a textual overlay to your video content. With the Video API, you can programmatically select a font style and size best suited to your video and its publishing location.
To add a textual overlay, use the following call. The code below adds the words “Demo Video” in 80-point Arial font to the middle of the video.
cloudinary.video("demo", {transformation: [
{overlay: {font_family: "Arial", font_size: 80, text: "Demo Video"}},
{flags: "layer_apply"}
]})Code language: CSS (css)You can also use Cloudinary transformations together, meaning you can perform many transformations from a single API call. Doing so allows you to customize your video content at scale faster.
Consider the following example. To add the textual overlay from the previous example and also add blurry padding around the video, you use the following call:
cloudinary.video("demo", {transformation: [
{overlay: {font_family: "Arial", font_size: 80, text: "Demo Video"}},
{flags: "layer_apply"}, {background: "blurred:400:15", height: 320, width: 480,
crop: "pad"}
]})Code language: CSS (css)Cloudinary’s Video API allows you to add effects to improve video quality without burning creative cycles on non-creative editing. For example, if your raw video is handheld and has unwanted motion, you can clean it up without using dedicated editing software. You implement this effect using the following call:
cloudinary.video("demo", {transformation: [{effect: "deshake:32}]"})
The 32 refers to the maximum movement in both directions in pixels, giving you some room for fine-tuning.
As with textual overlay, you can combine effects with other transformations to perform many modifications at once.
Cloudinary’s Video API enables you to adjust your video content to suit the design of your website or mobile app—all without having to bring in editing tools or graphic designers. And because Cloudinary automates these tasks, you save substantial time and increase your speed to market.
While you want to reduce your time to market, you don’t want to do so at the cost of applying video quality. Automating is fine, but you don’t want to apply the same transformations to every video. Cloudinary’s Video API offers conditional transformations to balance content quality and release efficiency.
Conditional transformations occur only when a specific condition is met—for example, if a video’s width is a certain number of pixels. Manually performing these checks and changes is a slow and tedious process, but Cloudinary allows you to save time by automating transformations on an as-applicable basis.
The basic structure for a conditional transformation is as follows:
if_condition/transformation/if_end
This structure allows you to check for set conditions and make appropriate transformations based on a video’s adherence to those conditions. Supported conditions include the video’s width (w), height (h), aspect ratio (ar), or tags added to the video upon upload (tags). You’ll find the complete list of conditions in the documentation.
Adding a blur to the sides of a video helps draw focus to your content, but only when it fits the device. If your video is in portrait orientation and is viewed on a device in portrait mode, blurry padding isn’t necessary. But if the video is viewed in landscape, you’ll want to add this blurred background.
With conditional transformations, you can programmatically apply a blurred effect to your video when it’s viewed in landscape. The script below dictates that if the aspect ratio is greater than one (if: “ar_gt_1.0”) then apply the transformation.
cloudinary.video("demo", {transformation: [
{width: 500, crop: "scale"},
{if: "ar_gt_1.0"},
{background: "blurred:400:15", height: 320, width: 480, crop: "pad"}
{if: "end"}
]})Code language: CSS (css)Cloudinary’s Video API uses if/else statements, meaning you can set conditional transformations that will apply one transformation when your set condition is met and a different transformation that will apply when it isn’t.
Building on the previous example, you can set a conditional transformation that states that a blurred background is added when the video is viewed in landscape, but a black background is added otherwise. The code for doing so is as follows:
cloudinary.video("demo", {transformation: [
{if: "ar_gt_1.0"},
{background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
{if: "else"},
{background: "black", height: 320, width: 480, crop: "pad"},
{if: "end"}
]})Code language: CSS (css)Conditional transformations enable you to process video content in bulk while still giving you control over which conditions require what transformations. Using Cloudinary’s Video API to implement these transformations automatically removes the onus from the creative team to alter videos to fit different formats and increase your market speed.
With modern e-commerce companies, time to market gets determined by the creative team’s ability to create video content. Cloudinary’s Video API allows you to leverage automation and AI to increase the speed at which videos can be customized, allowing you to generate more videos with fewer resources. The Video API also enables you to alter existing videos to appear different while retaining the brand look and feel.
With Cloudinary’s Video API, you can programmatically transform your video at scale and ensure customers are met with fresh, high-quality, and relevant video content.
The video transformations highlighted in this article help improve your engineering efficiency and time to market. To try these tools for yourself and generate quality video content more quickly, sign up for a free trial of Cloudinary today.
