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.

Webinar
Delivering Compelling Video Experiences at Scale

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

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more