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
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:
You can make it happen like so:
Start with the original Video: https://res.cloudinary.com/demo/video/upload/h-video.mp4
Add a padding, height, and width to the URL 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:
Start with the original video: https://res.cloudinary.com/demo/video/upload/celenarae.mp4
Layer another Video on top of it like so: l_video:asltranslation
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
- The Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/washyourhands.png
- The Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/washhands.mp4
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.
Top comments (0)