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

Manipulating the audio channel

By setting the audio_codec to none (ac_none in URLs), you can strip the audio channel from the video, serving it without sound. You can also chain another audio file as an overlay to replace the video’s original audio.

The original video file (with audio) -

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

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

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

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

The muted video -

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/ac_none/dog.mp4
Ruby:
Copy to clipboard
cl_video_tag("dog", :audio_codec=>"none")
PHP:
Copy to clipboard
cl_video_tag("dog", array("audio_codec"=>"none"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(audio_codec="none")
Node.js:
Copy to clipboard
cloudinary.video("dog", {audio_codec: "none"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().audioCodec("none")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {audioCodec: "none"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {audio_codec: "none"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation audioCodec="none" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation audioCodec="none" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation audio-codec="none">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AudioCodec("none")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().audioCodec("none")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAudioCodec("none")).generate("dog.mp4")

The video with a different (and objectively better) audio.

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/e_volume:-100/l_video:sample_pnnlu7,eo_13,fl_layer_apply/dog.mp4
Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:effect=>"volume:-100"},
  {:overlay=>"video:sample_pnnlu7", :end_offset=>"13", :flags=>"layer_apply"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("effect"=>"volume:-100"),
  array("overlay"=>"video:sample_pnnlu7", "end_offset"=>"13", "flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'effect': "volume:-100"},
  {'overlay': "video:sample_pnnlu7", 'end_offset': "13", 'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {effect: "volume:-100"},
  {overlay: "video:sample_pnnlu7", end_offset: "13", flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("volume:-100").chain()
  .overlay(new Layer().publicId("video:sample_pnnlu7")).endOffset("13").flags("layer_apply")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {effect: "volume:-100"},
  {overlay: new cloudinary.Layer().publicId("video:sample_pnnlu7"), endOffset: "13", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {effect: "volume:-100"},
  {overlay: new cloudinary.Layer().publicId("video:sample_pnnlu7"), end_offset: "13", flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation effect="volume:-100" />
  <Transformation overlay="video:sample_pnnlu7" endOffset="13" flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation effect="volume:-100" />
  <cld-transformation overlay="video:sample_pnnlu7" endOffset="13" flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation effect="volume:-100">
  </cl-transformation>
  <cl-transformation overlay="video:sample_pnnlu7" end-offset="13" flags="layer_apply">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("volume:-100").Chain()
  .Overlay(new Layer().PublicId("video:sample_pnnlu7")).EndOffset("13").Flags("layer_apply")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("volume:-100").chain()
  .overlay(new Layer().publicId("video:sample_pnnlu7")).endOffset("13").flags("layer_apply")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("volume:-100").chain()
  .setOverlay("video:sample_pnnlu7").setEndOffset("13").setFlags("layer_apply")).generate("dog.mp4")

The song is actually larger, but we cut it to its first 13 seconds with the end_offset (eo_ in the URL) parameter to match the video’s length.

by Maor Gariv
Tags: