8 Video Transformations Developers Can Make With One Line Of Code

unicodeveloper

Prosper Otemuyiwa

Posted on June 1, 2022

8 Video Transformations Developers Can Make With One Line Of Code

It's 2022. Developers are blessed with a plethora of resources to build websites, apps and services. You can't be left out!

In this article, I'll show you how to make video transformations without spending time and brain power architecting video transformation services from scratch.

In one line of code via URL manipulation, you can make the following transformation to your videos.

Note:
In these examples, I use a media service called Cloudinary for all the transformations. Sign up for free, upload and store your videos.

Your videos have to be uploaded to have these transformations work on them seamlessly.

1. Flip Videos

You can flip a video to any angle you desire with the parameter a_X where X stands for the following:

angle (a_) rotates or flips an asset by the specified number of degrees or automatically according to its orientation or available metadata.

  • A positive integer value which rotates a video clockwise OR
  • A negative integer value which rotates a video anticlockwise.

Code:

https://res.cloudinary.com/demo/video/upload/a_58/dog.mp4
Enter fullscreen mode Exit fullscreen mode

Video: https://res.cloudinary.com/demo/video/upload/a_58/dog.mp4

2. Add a Blurred View Of Your Video as The Background

You might have seen a few videos like this:
Image description

You can make it happen like so:

c_pad, h_720, w_128

https://res.cloudinary.com/demo/video/upload/c_pad,h_720,w_1280/h-video.mp4

  • Now, add background blur property like so:

b_blurred:1000

https://res.cloudinary.com/demo/video/upload/b_blurred:1000,c_pad,h_720,w_1280/h-video.mp4

3. Add a Video Watermark as an overlay to another Video

You can make it happen like so:

asltranslation is the public id of the video, while l_video is the parameter for layering a video.

https://res.cloudinary.com/demo/video/upload/l_video:asltranslation/celenarae.mp4

4. Add an Image to A Video

You can merge an existing image to a video by using the following combination of parameters:

  • overlay (l:) to specify the name of an uploaded image.
  • splice flag (fl_splice) to indicate that the image should be concatenated on to the container video and not added as an overlay.
  • duration parameter (du) to specify the amount of time in seconds to display the image.
  • start_offset set to 0 (so_0) to concatenate the image at the beginning of the video instead of at the end.
  • layer_apply (fl_layer_apply) to indicate that the above parameters are applied to the image (with the overlay parameter) and not the base video.

Now, check this out: https://res.cloudinary.com/cdemo/video/upload/w_500,h_400/w_500,h_400,l__mmm:washyourhands,fl_splice,du_5/so_0,fl_layer_apply/_mmm/washhands.mp4

5. Generate a Short Movie Scene From A Video

Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/geng.mp4

You can produce a short movie scene from a video by applying the following combination of transformation parameters:

  • l_text: Adds a text overlay to an image or video.

You can adjust the dimensions and position of the overlay with the w(width),h(height), x, y (x & y coordinates) and g(gravity) parameters with the overlay transformation.

  • start_offset set to 2 (so_2) to concatenate the text overlay from 2 seconds into the video instead of at the end.

  • end_offset set to 5 (eo_5) specifies the last second to include in a video.

  • e_fade fades into, or out of, an animated GIF or video. You can chain fade effects to both fade into and out of the media.

Check out the new transformed video: https://res.cloudinary.com/cdemo/video/upload/l_text:arial_60:Geng%20Of%20The%20Most%20High,g_north,y_80,so_2,eo_5/e_fade:2500/e_fade:-5000/_mmm/geng.mp4

6. Generate an Excerpt From A Video

Original Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/nademdeyrushus.mp4

You can produce an excerpt from this video by applying the following combination of transformation parameters:

  • start_offset set to 9.5(so_9.5) to start the video.

  • end_offset set to 13(eo_13) specifies the last second to include in a video.

Check out the generated excerpt: https://res.cloudinary.com/cdemo/video/upload/so_9.5,eo_13/_mmm/nademdeyrushus.mp4

7. Add Audio (Music) to Video

Original Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/pushup.mp4

The Audio to add: https://res.cloudinary.com/cdemo/video/upload/_mmm/mafo.mp3

You can add audio to this video by applying the following combination of transformation parameters:

  • l_video to overlay the audio on our original video.

You're probably wondering why it's not l_audio. Well, Cloudinary's l_video parameter allows to overlay either audio or video.

Check out the new video with audio added:
https://res.cloudinary.com/cdemo/video/upload/l_video:_mmm:mafo/_mmm/pushup.mp4

8. Generate Boomerang from a Video

A boomerang video is a short video clip that plays forwards and then backwards. You can find this filter on Instagram, Snapchat, Tiktok and the likes.

Original Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/secondflight.mp4

You can turn this video into a boomerang by applying the e_boomerang transformation parameter like so:

Boomerang Video: https://res.cloudinary.com/cdemo/video/upload/e_boomerang/_mmm/secondflight.mp4

You can combine other transformations make it an enhanced video. Check out more info about boomerang transformation here

SDK Integrations

There are different SDKs for integrating Cloudinary in your codebase. It's instant, easy to integrate and ships with amazing fluent interfaces.

Conclusion

Cloudinary provides a lot of transformation effects and more for media files.

With Cloudinary, you can automate your entire image-management lifecycle, from upload and transformation to optimization and delivery. The platform also features numerous capabilities for editing and managing videos.


Have suggestions or questions? Leave a comment below and I'll be happy to answer any questions you may have about Cloudinary and media transformations.

💖 💪 🙅 🚩
unicodeveloper
Prosper Otemuyiwa

Posted on June 1, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related