Video management

Cloudinary is a cloud-based service that provides an end-to-end media management solution for images and videos, including upload, storage, administration, manipulation, optimization and delivery.

Cloudinary manages your web application's resources in the cloud with a high-performance cloud-based storage solution. Highly available servers support fast upload and download rates, ensure your resources are secure, and scale for handling high load and bursts of traffic. Your resources are then delivered through fast Content Delivery Networks with advanced caching techniques, allowing Cloudinary to efficiently delivery your resources to visitors from all around the world.

Using Cloudinary's comprehensive API and easy to use manipulation URLs, with client libraries (SDKs) to simplify integration with web and mobile sites and apps, you can either upload videos from server-side code, directly from the browser or from a mobile app. The uploaded videos can then be automatically converted to all relevant formats suitable for web viewing, optimized for web browsers and mobile devices, normalized, and manipulated in real time to fit your graphic design: Cloudinary provides a rich set of dynamic on-the-fly video manipulation capabilities.

Cloudinary's SDKs are available for all major web development frameworks and allow you to easily build manipulation URLs and embed HTML5 video tags with all the video sources and settings to match the various devices and browsers of your users. The browser will automatically select the video format it supports, while the video files can be created dynamically on first access.

The video management service currently supports the following features:

Upload videos

Cloudinary's video management service enables video upload as follows:

Example 1: Uploading a local video file named dog.mp4:

Ruby:
Cloudinary::Uploader.upload("dog.mp4", :resource_type => :video)
PHP:
\Cloudinary\Uploader::upload("dog.mp4", 
    array("resource_type" => "video"));
Python:
cloudinary.uploader.upload("dog.mp4", 
        resource_type = "video")
Node.js:
cloudinary.uploader.upload("dog.mp4", 
        function(result) {console.log(result); }, 
        { resource_type: "video" });
Java:
cloudinary.uploader().upload("dog.mp4", 
        ObjectUtils.asMap("resource_type", "video"));
.Net:
var uploadParams = new VideoUploadParams()
{
  File = new FileDescription(@"dog.mp4"),
  ResourceType = "video"  
};
var uploadResult = cloudinary.Upload(uploadParams);

Example 2: Uploading a local video file named dog.mp4 and then generating two transformed videos as follows:

  1. Pad to a width and height of 300 pixels, remove audio, normalize and optimize the video for web delivery.

  2. Crop to a width of 160 pixels and a height of 100 pixels with south gravity, remove audio, normalize and optimize the video for web delivery.

Ruby:
Cloudinary::Uploader.upload("dog.mp4", :resource_type => :video,
    :eager => [
        {:width => 300, :height => 300, 
         :crop => :pad, :audio_codec => :none}, 
        {:width => 160, :height => 100, 
         :crop => :crop, :gravity => :south,
         :audio_codec => :none }])
PHP:
\Cloudinary\Uploader::upload("dog.mp4", array(
    "resource_type" => "video", 
    "eager" => array(
      array("width" => 300, "height" => 300,
      "crop" => "pad", "audio_codec" => "none"),
      array("width" => 160, "height" => 100,
      "crop" => "crop", "gravity" => "south",
      "audio_codec" => "none"))));
Python:
cloudinary.uploader.upload("dog.mp4", resource_type = "video",
    eager = [
      {"width": 300, "height": 300,
      "crop": "pad", "audio_codec": "none"},
      {"width": 160, "height": 100,
      "crop": "crop", "gravity": "south",
      "audio_codec": "none"}])
Node.js:
cloudinary.uploader.upload("dog.mp4", 
    function(result) {console.log(result); }, 
    { resource_type: "video", 
      eager: [
      { width: 300, height: 300,
        crop: "pad", audio_codec: "none" }, 
      { width: 160, height: 100,
        crop: "crop", gravity: "south",
        audio_codec: "none" } ]});
Java:
cloudinary.uploader().upload("dog.mp4", 
        ObjectUtils.asMap("resource_type", "video",
        "eager", Arrays.asList(
      new Transformation().width(300).height(300).crop("pad").audioCodec("none"),
      new Transformation().width(160).height(100).crop("crop").gravity("south").audioCodec("none"))));
.Net:
var uploadParams = new VideoUploadParams()
{
  File = new FileDescription(@"dog.mp4"),
  ResourceType = "video"
  EagerTransforms = new List<Transformation>()
  {
    new Transformation().Width(300).Height(300).Crop("pad").AudioCodec("none"),
    new Transformation().Width(160).Height(100).Crop("crop").Gravity("south").AudioCodec("none")),
  }  
};
var uploadResult = cloudinary.Upload(uploadParams);

Video manipulation and delivery

Cloudinary's video management service enables simple video delivery and advanced video manipulation as follows:

Example 1: Scaling down the uploaded mp4 video named dog to a width of 400 pixels while converting to the WebM format:

Ruby:
cl_video_tag("dog", :width=>400, :crop=>"scale")
PHP:
cl_video_tag("dog", array("width"=>400, "crop"=>"scale"))
Python:
CloudinaryVideo("dog").video(width=400, crop="scale")
Node.js:
cloudinary.video("dog", {width: 400, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(400).crop("scale")).videoTag("dog")
JS:
cl.videoTag('dog', {width: 400, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 400, crop: "scale"})
React:
<Video publicId="dog" width="400" crop="scale">
        <Transformation width=400 crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" width="400" crop="scale">
        <cl-transformation width=400 crop="scale" />
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(400).Crop("scale")).BuildVideoTag("dog")

Example 2: Cropping the uploaded mp4 video to fill a 300x300 square and adding an image overlay as a watermark:

Ruby:
cl_video_tag("dog", :transformation=>[
  {:width=>300, :height=>300, :crop=>"fill"},
  {:overlay=>"cloudinary_icon", :width=>0.8, :flags=>"relative", :effect=>"brightness:200", :opacity=>50}
  ])
PHP:
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>300, "height"=>300, "crop"=>"fill"),
  array("overlay"=>"cloudinary_icon", "width"=>0.8, "flags"=>"relative", "effect"=>"brightness:200", "opacity"=>50)
  )))
Python:
CloudinaryVideo("dog").video(transformation=[
  {"width": 300, "height": 300, "crop": "fill"},
  {"overlay": "cloudinary_icon", "width": 0.8, "flags": "relative", "effect": "brightness:200", "opacity": 50}
  ])
Node.js:
cloudinary.video("dog", {transformation: [
  {width: 300, height: 300, crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.8, flags: "relative", effect: "brightness:200", opacity: 50}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(300).crop("fill").chain()
  .overlay("cloudinary_icon").width(0.8).flags("relative").effect("brightness:200").opacity(50)).videoTag("dog")
JS:
cl.videoTag('dog', {transformation: [
  {width: 300, height: 300, crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.8, flags: "relative", effect: "brightness:200", opacity: 50}
  ]}).toHtml();
jQuery:
$.cloudinary.video("dog", {transformation: [
  {width: 300, height: 300, crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.8, flags: "relative", effect: "brightness:200", opacity: 50}
  ]})
React:
<Video publicId="dog" >
        <Transformation width=300 height=300 crop="fill" />
        <Transformation overlay="cloudinary_icon" width=0.8 flags="relative" effect="brightness:200" opacity=50 />
</Video>
Angular:
<cl-video public-id="dog" >
        <cl-transformation width=300 height=300 crop="fill" />
        <cl-transformation overlay="cloudinary_icon" width=0.8 flags="relative" effect="brightness:200" opacity=50 />
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(300).Crop("fill").Chain()
  .Overlay("cloudinary_icon").Width(0.8).Flags("relative").Effect("brightness:200").Opacity(50)).BuildVideoTag("dog")

Example 3: Create a 300x300 circular cropped thumbnail of the frame at 30% of the video and adds a semi-transparent watermark:

Ruby:
cl_image_tag("dog.jpg", :resource_type=>"video", :transformation=>[
  {:width=>300, :height=>300, :radius=>"max", :effect=>"sharpen", :start_offset=>"30p", :crop=>"fill"},
  {:overlay=>"cloudinary_icon", :width=>0.9, :flags=>"relative", :opacity=>40}
  ])
PHP:
cl_image_tag("dog.jpg", array("resource_type"=>"video", "transformation"=>array(
  array("width"=>300, "height"=>300, "radius"=>"max", "effect"=>"sharpen", "start_offset"=>"30p", "crop"=>"fill"),
  array("overlay"=>"cloudinary_icon", "width"=>0.9, "flags"=>"relative", "opacity"=>40)
  )))
Python:
CloudinaryVideo("dog.jpg").image(transformation=[
  {"width": 300, "height": 300, "radius": "max", "effect": "sharpen", "start_offset": "30p", "crop": "fill"},
  {"overlay": "cloudinary_icon", "width": 0.9, "flags": "relative", "opacity": 40}
  ])
Node.js:
cloudinary.image("dog.jpg", {resource_type: "video", transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", start_offset: "30p", crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.9, flags: "relative", opacity: 40}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(300).radius("max").effect("sharpen").startOffset("30p").crop("fill").chain()
  .overlay("cloudinary_icon").width(0.9).flags("relative").opacity(40)).resourceType("video").imageTag("dog.jpg")
JS:
cl.videoTag('dog.jpg', {transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", start_offset: "30p", crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.9, flags: "relative", opacity: 40}
  ]}).toHtml();
jQuery:
$.cloudinary.image("dog.jpg", {resource_type: "video", transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", start_offset: "30p", crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.9, flags: "relative", opacity: 40}
  ]})
React:
<Video publicId="dog.jpg" resource_type="video">
        <Transformation width=300 height=300 radius="max" effect="sharpen" start_offset="30p" crop="fill" />
        <Transformation overlay="cloudinary_icon" width=0.9 flags="relative" opacity=40 />
</Video>
Angular:
<cl-video public-id="dog.jpg" resource_type="video">
        <cl-transformation width=300 height=300 radius="max" effect="sharpen" start_offset="30p" crop="fill" />
        <cl-transformation overlay="cloudinary_icon" width=0.9 flags="relative" opacity=40 />
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(300).Radius("max").Effect("sharpen").StartOffset("30p").Crop("fill").Chain()
  .Overlay("cloudinary_icon").Width(0.9).Flags("relative").Opacity(40)).BuildImageTag("dog.jpg")
300x300 thumbnail of frame at 30% of dog.mp4 with watermark