Cloudinary Blog

Introducing Boomerang Video Effect with Cloudinary

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind? Boomerang

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Boomerang videos have become popular since a few years ago as videos make up a large portion of communications on social media. Little wonder that Instagram moved fast in 2016 to integrate this feature into its app. Indisputably, motion graphics are leading the trend for online chats, leading to a significant increase in GIFs and boomerang videos.

Boomerang videos are fun and appealing, , especially for advertisers, because they keep you glued for a few more seconds—ample time in which to spotlight the core capabilities of the products in question. A good example is the showcase of Microsoft's Surface Book laptop on Instagram. Short, simple, and concise advertisements like that never fail to catch attention.

Boomerang videos are also in popular use for memes, which are usually in the form of humorous images, videos, or text. Those videos are nothing new, however. Many high-profile videos, such as Jidenna’s Boomerang, have adopted this format for a while

Cloudinary Makes It a Cinch

With Cloudinary’s e-boomerang capability, which enables videos to reverse themselves, you can add effects and transformations to the media stored on your console. Adding the effect doubles the length of the video, whose second half shows the reverse of the first half.

Ruby:
cl_video_tag("Cloudinary_Celebrating_1", :effect=>"boomerang")
PHP:
cl_video_tag("Cloudinary_Celebrating_1", array("effect"=>"boomerang"))
Python:
CloudinaryVideo("Cloudinary_Celebrating_1").video(effect="boomerang")
Node.js:
cloudinary.video("Cloudinary_Celebrating_1", {effect: "boomerang"})
Java:
cloudinary.url().transformation(new Transformation().effect("boomerang")).videoTag("Cloudinary_Celebrating_1");
JS:
cloudinary.videoTag('Cloudinary_Celebrating_1', {effect: "boomerang"}).toHtml();
jQuery:
$.cloudinary.video("Cloudinary_Celebrating_1", {effect: "boomerang"})
React:
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
</Video>
Angular:
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("boomerang")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
MediaManager.get().url().transformation(new Transformation().effect("boomerang")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("boomerang")).generate("Cloudinary_Celebrating_1.mp4")

Since boomerang videos are supposed to be brief, Cloudinary’s eo_# effect reduces the video length. The eo_ effect is an existing feature. For example, to trim your video to 3 seconds, add the eo_3 effect. Afterwards, by adding Cloudinary’s chained transformations to the e-boomerang effect, you generate a video length of 6 seconds. That’s because Cloudinary has selected the first 3 seconds from the original video and another 3 seconds from the reversed version of the selected clip.

Ruby:
cl_video_tag("Cloudinary_Celebrating_1", :transformation=>[
  {:effect=>"boomerang"},
  {:end_offset=>"3"}
  ])
PHP:
cl_video_tag("Cloudinary_Celebrating_1", array("transformation"=>array(
  array("effect"=>"boomerang"),
  array("end_offset"=>"3")
  )))
Python:
CloudinaryVideo("Cloudinary_Celebrating_1").video(transformation=[
  {'effect': "boomerang"},
  {'end_offset': "3"}
  ])
Node.js:
cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3")).videoTag("Cloudinary_Celebrating_1");
JS:
cloudinary.videoTag('Cloudinary_Celebrating_1', {transformation: [
  {effect: "boomerang"},
  {endOffset: "3"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3"}
  ]})
React:
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
  <Transformation endOffset="3" />
</Video>
Angular:
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
  <cl-transformation end-offset="3">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .EndOffset("3")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("boomerang").chain()
  .setEndOffset("3")).generate("Cloudinary_Celebrating_1.mp4")

Another interesting characteristic of boomerang videos is their repetitions. To keep a boomerang video looping, add the e_loop effect along with the eo_3.

Ruby:
cl_video_tag("Cloudinary_Celebrating_1", :transformation=>[
  {:effect=>"boomerang"},
  {:end_offset=>"3", :effect=>"loop:10"}
  ])
PHP:
cl_video_tag("Cloudinary_Celebrating_1", array("transformation"=>array(
  array("effect"=>"boomerang"),
  array("end_offset"=>"3", "effect"=>"loop:10")
  )))
Python:
CloudinaryVideo("Cloudinary_Celebrating_1").video(transformation=[
  {'effect': "boomerang"},
  {'end_offset': "3", 'effect': "loop:10"}
  ])
Node.js:
cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3", effect: "loop:10"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3").effect("loop:10")).videoTag("Cloudinary_Celebrating_1");
JS:
cloudinary.videoTag('Cloudinary_Celebrating_1', {transformation: [
  {effect: "boomerang"},
  {endOffset: "3", effect: "loop:10"}
  ]}).toHtml();
jQuery:
$.cloudinary.video("Cloudinary_Celebrating_1", {transformation: [
  {effect: "boomerang"},
  {end_offset: "3", effect: "loop:10"}
  ]})
React:
<Video publicId="Cloudinary_Celebrating_1" >
  <Transformation effect="boomerang" />
  <Transformation endOffset="3" effect="loop:10" />
</Video>
Angular:
<cl-video public-id="Cloudinary_Celebrating_1" >
  <cl-transformation effect="boomerang">
  </cl-transformation>
  <cl-transformation end-offset="3" effect="loop:10">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .EndOffset("3").Effect("loop:10")).BuildVideoTag("Cloudinary_Celebrating_1")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .endOffset("3").effect("loop:10")).resourceType("video").generate("Cloudinary_Celebrating_1.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("boomerang").chain()
  .setEndOffset("3").setEffect("loop:10")).generate("Cloudinary_Celebrating_1.mp4")

Conclusion

Even though you might not know their proper name, you must have seen boomerang videos before. However, despite the fact that such videos have been around for years, creating them is no cakewalk for many web developers. Enter Cloudinary. Thanks to its intuitive video manipulation techniques with e_boomerang, creating boomerang videos on Cloudinary is a seamless, simple process.

Do try it out: Create a Cloudinary account first and then upload videos and add awesome effects and transformations. Problems? Thoughts? Describe them in the Comments section . We welcome your feedback.

Recent Blog Posts

Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more
Multi Codec Adaptive Bitrate Streaming

In Part I of this series, we discussed the optimal way to deliver progressive video streams, taking advantage of modern, efficient codecs. That approach works great for short-form videos (under 20 seconds) and for videos that are displayed at a low resolution (such as ads and previews). But what if you're delivering videos that are longer than 20 seconds for a higher-resolution experience? You can certainly still deliver them as a single file (progressive streaming), but you might run into issues, such as buffering or too high a resolution.

Read more
Why Visual Storytelling Matters

In my communications role here at Cloudinary, I get to speak to a lot of experts across a variety of subject matter areas, technology and not, about what it takes to connect to today’s consumer. The power of images and other forms of digital content is often at the center of these conversations given our focus at Cloudinary. And as a hobbyist and professional photographer for more than 20 years, I care deeply about images and their role in creating authentic connections and engagement.

Read more
How to Automatically Generate alt Text for Images

Images and videos are critical for ensuring user engagement on the web. For instance, on a retail website, images of a product from different angles or a 360-degree video of the product can lead to higher conversion rates. For a news website, users are more likely to read articles with visual media accompanying the content. It has been reported that posts that include images produce a 650-percent higher user-engagement rate than text-only posts.

Read more