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

Sound Browser: Grand Prize Winner of the Capitol360 Hackathon

Music videos, which comprise an important part of the video-streaming industry, are consistently the most-viewed content on streaming giants, such as YouTube and Vimeo. In exchange for free viewing, those channels serve advertisements for revenue. That business model creates a clumsy user experience, however, as a result of often-repeated ads that don't relate to the content.

Read more
Building a Live Feed of FIFA World Cup Moments

Widely acclaimed as the world’s biggest sporting event, the World Cup has established itself as the most captivating tournament to look forward to across the globe. Dating back to 1930, when the first World Cup was hosted in Uruguay, it has always engendered numerous moments of excitement, not only for the participating teams but also for the countries they ably represented. Little could anyone have anticipated that a game of 22 able-bodied men running to take possession of a leather ball could become so famous.

Read more
Auto AI Content Recognition Tagging in Cloudinary DAM

Automating the categorization of your images and videos can help democratize access to your organization's creative assets. Many teams throughout your organization have likely spent a lot of time and effort generating high-quality content, but it'd be all for naught if the content just ends up in some anonymous folder on somebody's hard drive or is randomly dropped into your cloud storage with no functional organizational strategy.

Read more
Capitol 360 Incubating New Waves of MusicTech

Last month, we had the pleasure of supporting Capitol Music Group’s first ever hackathon, the first in a series of hackathons as part of its newly launched Capitol360 Innovation Center, established to bridge the gaps between music and tech and make music better for everyone. We are proud to be a founding technology partner and were honored to play a part in Capitol’s first-ever 24-hour hack. And because so many of us are avid and longtime music fans we’re also personally thrilled to have the opportunity to work with one of the most influential leaders in music to foster these new and meaningful connections.

Read more
Headshot transformations from Fluent + Velocity 2018

On June 13-14, O'Reilly held its annual Fluent + Velocity conference in San Jose and it was great! Cloudinary set up a pretty incredible booth and brought in a professional photographer to take headshots of the attendees who stopped by. Once a photo was snapped, the raw camera file was immediately uploaded to our media library and transformed into something that can be posted right away on LinkedIn.

Read more