Moving video overlay
Video overlays
Place a video on top of another by using the overlay
parameter while adding the ‘video:’ type to it (l_video
in URLs).
cl_video_tag("dog", :transformation=>[ {:width=>150, :effect=>"accelerate:100", :overlay=>"video:abbey_road"}, {:gravity=>"west", :start_offset=>"0", :end_offset=>"2", :flags=>"layer_apply"}, {:overlay=>"video:abbey_road"}, {:width=>150, :effect=>"accelerate:100", :gravity=>"center", :start_offset=>"2", :end_offset=>"5", :flags=>"layer_apply", :crop=>"scale"}, {:overlay=>"video:abbey_road"}, {:width=>150, :effect=>"accelerate:100", :gravity=>"east", :start_offset=>"5", :flags=>"layer_apply", :crop=>"scale"} ])
cl_video_tag("dog", array("transformation"=>array( array("width"=>150, "effect"=>"accelerate:100", "overlay"=>"video:abbey_road"), array("gravity"=>"west", "start_offset"=>"0", "end_offset"=>"2", "flags"=>"layer_apply"), array("overlay"=>"video:abbey_road"), array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"center", "start_offset"=>"2", "end_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale"), array("overlay"=>"video:abbey_road"), array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"east", "start_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale") )))
CloudinaryVideo("dog").video(transformation=[ {'width': 150, 'effect': "accelerate:100", 'overlay': "video:abbey_road"}, {'gravity': "west", 'start_offset': "0", 'end_offset': "2", 'flags': "layer_apply"}, {'overlay': "video:abbey_road"}, {'width': 150, 'effect': "accelerate:100", 'gravity': "center", 'start_offset': "2", 'end_offset': "5", 'flags': "layer_apply", 'crop': "scale"}, {'overlay': "video:abbey_road"}, {'width': 150, 'effect': "accelerate:100", 'gravity': "east", 'start_offset': "5", 'flags': "layer_apply", 'crop': "scale"} ])
cloudinary.video("dog", {transformation: [ {width: 150, effect: "accelerate:100", overlay: "video:abbey_road"}, {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"}, {overlay: "video:abbey_road"}, {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"}, {overlay: "video:abbey_road"}, {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain() .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).videoTag("dog");
cloudinary.videoTag('dog', {transformation: [ {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {gravity: "west", startOffset: "0", endOffset: "2", flags: "layer_apply"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "center", startOffset: "2", endOffset: "5", flags: "layer_apply", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "east", startOffset: "5", flags: "layer_apply", crop: "scale"} ]}).toHtml();
$.cloudinary.video("dog", {transformation: [ {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"} ]})
<Video publicId="dog" > <Transformation width="150" effect="accelerate:100" overlay="video:abbey_road" /> <Transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" /> <Transformation overlay="video:abbey_road" /> <Transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" /> <Transformation overlay="video:abbey_road" /> <Transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" /> </Video>
<cld-video publicId="dog" > <cld-transformation width="150" effect="accelerate:100" overlay="video:abbey_road" /> <cld-transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" /> <cld-transformation overlay="video:abbey_road" /> <cld-transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" /> <cld-transformation overlay="video:abbey_road" /> <cld-transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" /> </cld-video>
<cl-video public-id="dog" > <cl-transformation width="150" effect="accelerate:100" overlay="video:abbey_road"> </cl-transformation> <cl-transformation gravity="west" start-offset="0" end-offset="2" flags="layer_apply"> </cl-transformation> <cl-transformation overlay="video:abbey_road"> </cl-transformation> <cl-transformation width="150" effect="accelerate:100" gravity="center" start-offset="2" end-offset="5" flags="layer_apply" crop="scale"> </cl-transformation> <cl-transformation overlay="video:abbey_road"> </cl-transformation> <cl-transformation width="150" effect="accelerate:100" gravity="east" start-offset="5" flags="layer_apply" crop="scale"> </cl-transformation> </cl-video>
cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(150).Effect("accelerate:100").Overlay(new Layer().PublicId("video:abbey_road")).Chain() .Gravity("west").StartOffset("0").EndOffset("2").Flags("layer_apply").Chain() .Overlay(new Layer().PublicId("video:abbey_road")).Chain() .Width(150).Effect("accelerate:100").Gravity("center").StartOffset("2").EndOffset("5").Flags("layer_apply").Crop("scale").Chain() .Overlay(new Layer().PublicId("video:abbey_road")).Chain() .Width(150).Effect("accelerate:100").Gravity("east").StartOffset("5").Flags("layer_apply").Crop("scale")).BuildVideoTag("dog")
MediaManager.get().url().transformation(new Transformation() .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain() .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).resourceType("video").generate("dog.mp4");
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(150).setEffect("accelerate:100").setOverlay("video:abbey_road").chain() .setGravity("west").setStartOffset("0").setEndOffset("2").setFlags("layer_apply").chain() .setOverlay("video:abbey_road").chain() .setWidth(150).setEffect("accelerate:100").setGravity("center").setStartOffset("2").setEndOffset("5").setFlags("layer_apply").setCrop("scale").chain() .setOverlay("video:abbey_road").chain() .setWidth(150).setEffect("accelerate:100").setGravity("east").setStartOffset("5").setFlags("layer_apply").setCrop("scale")).generate("dog.mp4")