Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Boomerang effect

Playing a video in both directions - by applying the overlay parameter on the video and using the splice flag. For example, let’s create an instant replay of this bike stunt -

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/bike_stunt.mp4
Ruby:
Copy to clipboard
cl_video_tag("bike_stunt")
PHP:
Copy to clipboard
cl_video_tag("bike_stunt")
Python:
Copy to clipboard
CloudinaryVideo("bike_stunt").video()
Node.js:
Copy to clipboard
cloudinary.video("bike_stunt")
Java:
Copy to clipboard
cloudinary.url().videoTag("bike_stunt");
JS:
Copy to clipboard
cloudinary.videoTag('bike_stunt').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bike_stunt")
React:
Copy to clipboard
<Video publicId="bike_stunt" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bike_stunt" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bike_stunt" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("bike_stunt")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("bike_stunt.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("bike_stunt.mp4")

A first regular view, followed by a “rewind” (carried out by using the reverse effect). Then, another play, this time with slo-mo (accelerate effect with negative values) -

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/l_video:bike_stunt,e_reverse,fl_splice/l_video:bike_stunt,e_accelerate:-50,fl_splice/bike_stunt.mp4
Ruby:
Copy to clipboard
cl_video_tag("bike_stunt", :transformation=>[
  {:overlay=>"video:bike_stunt", :effect=>"reverse", :flags=>"splice"},
  {:overlay=>"video:bike_stunt", :effect=>"accelerate:-50", :flags=>"splice"}
  ])
PHP:
Copy to clipboard
cl_video_tag("bike_stunt", array("transformation"=>array(
  array("overlay"=>"video:bike_stunt", "effect"=>"reverse", "flags"=>"splice"),
  array("overlay"=>"video:bike_stunt", "effect"=>"accelerate:-50", "flags"=>"splice")
  )))
Python:
Copy to clipboard
CloudinaryVideo("bike_stunt").video(transformation=[
  {'overlay': "video:bike_stunt", 'effect': "reverse", 'flags': "splice"},
  {'overlay': "video:bike_stunt", 'effect': "accelerate:-50", 'flags': "splice"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bike_stunt", {transformation: [
  {overlay: "video:bike_stunt", effect: "reverse", flags: "splice"},
  {overlay: "video:bike_stunt", effect: "accelerate:-50", flags: "splice"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).videoTag("bike_stunt");
JS:
Copy to clipboard
cloudinary.videoTag('bike_stunt', {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "reverse", flags: "splice"},
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "accelerate:-50", flags: "splice"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bike_stunt", {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "reverse", flags: "splice"},
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "accelerate:-50", flags: "splice"}
  ]})
React:
Copy to clipboard
<Video publicId="bike_stunt" >
  <Transformation overlay="video:bike_stunt" effect="reverse" flags="splice" />
  <Transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bike_stunt" >
  <cld-transformation overlay="video:bike_stunt" effect="reverse" flags="splice" />
  <cld-transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bike_stunt" >
  <cl-transformation overlay="video:bike_stunt" effect="reverse" flags="splice">
  </cl-transformation>
  <cl-transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("video:bike_stunt")).Effect("reverse").Flags("splice").Chain()
  .Overlay(new Layer().PublicId("video:bike_stunt")).Effect("accelerate:-50").Flags("splice")).BuildVideoTag("bike_stunt")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).resourceType("video").generate("bike_stunt.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("video:bike_stunt").setEffect("reverse").setFlags("splice").chain()
  .setOverlay("video:bike_stunt").setEffect("accelerate:-50").setFlags("splice")).generate("bike_stunt.mp4")

by Maor Gariv
Tags: