← View popular recipes

Find recipes by 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 -

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/bike_stunt.mp4

Ruby:

cl_video_tag("bike_stunt")

PHP v1:

cl_video_tag("bike_stunt")

PHP v2:

(new VideoTag('bike_stunt.mp4'));

Python:

CloudinaryVideo("bike_stunt").video()

Node.js:

cloudinary.video("bike_stunt")

Java:

cloudinary.url().videoTag("bike_stunt");

JS:

cloudinary.videoTag('bike_stunt').toHtml();

jQuery:

$.cloudinary.video("bike_stunt")

React:

<Video publicId="bike_stunt" >

</Video>

Vue.js:

<cld-video publicId="bike_stunt" >

</cld-video>

Angular:

<cl-video public-id="bike_stunt" >

</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.BuildVideoTag("bike_stunt")

Android:

MediaManager.get().url().resourceType("video").generate("bike_stunt.mp4");

iOS:

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) -

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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:

cl_video_tag("bike_stunt", :transformation=>[
  {:overlay=>"video:bike_stunt", :effect=>"reverse", :flags=>"splice"},
  {:overlay=>"video:bike_stunt", :effect=>"accelerate:-50", :flags=>"splice"}
  ])

PHP v1:

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")
  )))

PHP v2:

(new VideoTag('bike_stunt.mp4'))
  ->videoEdit(
      VideoEdit::concatenate(Concatenate::videoSource('bike_stunt')
        ->transformation((new VideoTransformation())
          ->effect(Effect::reverse()))))
    ->videoEdit(
        VideoEdit::concatenate(Concatenate::videoSource('bike_stunt')
          ->transformation((new VideoTransformation())
            ->effect(Effect::accelerate()->rate(-50))
      
    )));

Python:

CloudinaryVideo("bike_stunt").video(transformation=[
  {'overlay': "video:bike_stunt", 'effect': "reverse", 'flags': "splice"},
  {'overlay': "video:bike_stunt", 'effect': "accelerate:-50", 'flags': "splice"}
  ])

Node.js:

cloudinary.video("bike_stunt", {transformation: [
  {overlay: "video:bike_stunt", effect: "reverse", flags: "splice"},
  {overlay: "video:bike_stunt", effect: "accelerate:-50", flags: "splice"}
  ]})

Java:

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:

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:

$.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:

<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:

<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:

<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:

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:

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:

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 Jul 02, 2020

Tags: