Automating Video on Your Website with Video APIs

Video is an inseparable part of many modern websites. Whether you are serving your own video content, embedding content from social media, or allowing users to upload their own content – serving video can become a major chore. In this article, I’ll look at a few ways you can use video APIs to automate and streamline processing, encoding, and delivery of video in websites and web applications.

What is a Video API?

A video application programming interface (API) allows you to create video content, store, and deliver it to an application. Most Video APIs provide a mechanism for retrieving analytics about videos or live streams that you show to viewers. Video APIs are flexible and can be developed for any use case you desire.

A video API will sometimes focus on a specific aspect of creating or delivering video content. For example, there are APIs that only deal with live streaming, while other APIs specialize in transcoding videos for use in different settings.

What Can You Automate with Video on Your Site?

Cloud-Based Storage

Storing video content on your web server quickly becomes impractical because video files are huge. Video APIs can give you access to low-cost cloud storage such as Amazon S3 or Google Cloud Storage. Typically, the video API will handle cloud storage on the back-end so you will not have to integrate directly with the cloud. 

This has two advantages: it lets you store much more without running out of space, and allows you to deliver video more easily because it is already stored in the cloud and can be moved to a location nearer to your end-users (for example, if you have users in Europe, you can select cloud storage in a European data center).

Video Encoding and Delivery

You can use a video API to automatically transcode uploaded videos to various formats suited to the web. APIs allow you to optimize video files for web browsers or mobile devices. Many video platforms let you deliver video through a content delivery network (CDN) to speed up loading and buffering time for viewers. 

Automated Video Adjustment

Some video APIs let you modify videos on the fly to fit the graphic design of your app or website. The original files for both server-side and user-uploaded videos are stored in the cloud. Videos can be cropped and resized and then delivered dynamically upon request, either using API calls or dynamic URLs which you can embed in your application’s video tags.

Video Effects

You can apply video effects to uploaded video files, which will modify the appearance of the video you deliver. This can make videos more attractive and give them a consistent, polished look that matches your brand image. Examples of effects include:

• Accelerating video playback speed
• Creating boomerang video clips
• Applying transparency to the background 
• Applying a color overlay
• Generating AI-powered video previews
• Adding or removing visual noise
• Applying a fade-in or fade-out effect
• Blurring parts of the video
• Adjusting contrast or brightness

Video Thumbnails

Video APIs allow you to easily create thumbnails of a video using a particular frame from the uploaded video. This allows you to display an attractive gallery of videos to website users without manual effort, and easily add more videos to the gallery.

Video Subtitles and Captions

You can overlay text on your videos in the form of subtitles or captions, which will be displayed at specified times. Subtitles are text translations of the audio content, while captions are text provided for the hearing impaired or in case spoken words on the audio track are unclear.

Now that we understand the options for video automation, let’s dive into two popular video APIs and see how they can help you accomplish common video tasks automatically.

Automating Video with Cloudinary API

Cloudinary is a cloud-based image and video API, which you can use free forever, with a limit on the storage capacity and a number of operations performed. Cloudinary provides the full range of video automation capabilities, including video transcoding, live streaming, and automated adjustment and treatment of videos based on AI.

Below we show two examples of how Cloudinary can help you automate common video actions on your site: resizing and cropping videos to fit the dimensions of your site, and automatically applying video effects.

Resizing and Cropping Videos

Cloudinary provides a range of SDKs for all popular programming languages, but it offers an easier option—dynamic URLs. For every video asset you upload, Cloudinary gives you a URL, and you can directly modify the URL parameters to modify the video on the fly.

You can use the width (w) and height (h) parameters in the URL to change the size of your video. You may choose to resize your video with both parameters or, alternatively, you can adjust only one parameter and the other dimension will be automatically adjusted to keep the same aspect ratio. 

Here are some examples of how you can resize an uploaded mp4 video with the filename dog:

1. Resize to 100×150 pixels:

 

2. Resize to half the width with the same aspect ratio:

 

3. Resize to a height of 200 pixels, with the same aspect ratio:

 

When you manipulate the dimensions of an uploaded video, you need to determine how the video is adapted or cropped to fit the desired proportions. Use the crop parameter (c in the URL) to select the crop mode. There are several options for the crop parameter, including scale, crop, and fill—some of these options can automatically cut out parts of the video, focusing on the most important elements, while retaining the aspect ratio.

Automated Video Effects

Adjust Video Playback Speed

You can speed up or slow down playback using the e_accelerate command in the URL. Insert an integer value from -50 to 100 to determine the percentage by which the playback speed will be changed (negative represents slow down while positive increases video speed).

The following URL will take an uploaded MP4 file, resize it to 300 pixels in width, and accelerate to twice normal speed:

https://res.cloudinary.com/demo/video/upload/c_scale,w_300/e_accelerate:100/dog.mp4 

Reverse Playback

You can play audio and video files backwards using the reverse effect (e_reverse in the URL):

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/e_reverse/pencil_sketch.mp4

Control Video Looping

Adding the e_loop command to the URL causes the video to loop a specified number of times. For example, you can deliver a video that plays exactly three times, by setting e_loop to 3:

https://res.cloudinary.com/demo/video/upload/e_loop:3/ski_jump.mp4 

Automating Video with Mux API

Mux is a video API that lets you add video experiences to a website or web application. It lets you upload video in a range of formats, stream it live or via RTMP, perform just-in-time or per-title encoding, and add features to video streams, such as titles, closed captions, and thumbnails. Code examples in this section are taken from the Mux documentation.

Generating Clips From Video

When you upload a video or start a video stream, Mux represents the video as an asset that has an asset_id. 

To create a short clip from a longer video, make a POST request to the /assets endpoint. Three arguments are needed to create a clip: url, start_time, and end_time. The URL is always mux://assets/{asset_id}. For the start and end time, provide the number of seconds from the start of the video, indicating where the clip should begin and end.

The response includes an asset_id and a playback_id for the resulting clip.

Adding Subtitles and Captions

Mux lets you add subtitles to a video based on an SRT or WebVTT file with the subtitle text. You can do this by adding a text track as part of the video input. 

When uploading a video, the first input must be a video file, and after it, you can add one or more text tracks for subtitles. 

In the resulting stream URL, you can choose to enable subtitles. For example, you can create an HLS stream request that displays English subtitles by default:

Conclusion

In this article I covered the basics of web-based video delivery and automation, and showed how to automate four common tasks using two video APIs:

Cloudinary API:

• Resizing and cropping videos
• Automated video effects (adjusting video playback, reverse playback, and looping)

Mux API:

• Generating short clips from video
• Adding subtitles and captions from an SRT of WebVTT file

Of course, this is just a drop in the ocean of what you can achieve with these and other great video APIs. I hope this will give you a head start and make your website more efficient, attractive, and engaging.