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.

You can upload videos from server-side code, directly from the browser or from a mobile app. Your uploaded videos can then be automatically transcoded 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 and streaming 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.

For best results, you can deliver your videos using Cloudinary's feature-rich JavaScript video player, with built-in adaptive bitrate streaming support, customizable look and feel, playlists, recommendations, event-capture and analytics support, and more.

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:
cloudinary.videoTag('dog', {width: 400, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.video("dog", {width: 400, crop: "scale"})
React:
<Video publicId="dog" >
  <Transformation width="400" crop="scale" />
</Video>
Angular:
<cl-video public-id="dog" >
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(400).Crop("scale")).BuildVideoTag("dog")
Android:
MediaManager.get().url().transformation(new Transformation().width(400).crop("scale")).resourceType("video").generate("dog.webm");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(400).setCrop("scale")).generate("dog.webm")

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(new Layer().publicId("cloudinary_icon")).width(0.8).flags("relative").effect("brightness:200").opacity(50)).videoTag("dog");
JS:
cloudinary.videoTag('dog', {transformation: [
  {width: 300, height: 300, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("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: new cloudinary.Layer().publicId("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>
  <cl-transformation overlay="cloudinary_icon" width="0.8" flags="relative" effect="brightness:200" opacity="50">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(300).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Width(0.8).Flags("relative").Effect("brightness:200").Opacity(50)).BuildVideoTag("dog")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(300).crop("fill").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).width(0.8).flags("relative").effect("brightness:200").opacity(50)).resourceType("video").generate("dog.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(300).setHeight(300).setCrop("fill").chain()
  .setOverlay("cloudinary_icon").setWidth(0.8).setFlags("relative").setEffect("brightness:200").setOpacity(50)).generate("dog.mp4")

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(new Layer().publicId("cloudinary_icon")).width(0.9).flags("relative").opacity(40)).resourceType("video").imageTag("dog.jpg");
JS:
cloudinary.videoTag('dog.jpg', {transformation: [
  {width: 300, height: 300, radius: "max", effect: "sharpen", startOffset: "30p", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("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: new cloudinary.Layer().publicId("cloudinary_icon"), width: "0.9", flags: "relative", opacity: 40}
  ]})
React:
<Video publicId="dog.jpg" resourceType="video">
  <Transformation width="300" height="300" radius="max" effect="sharpen" startOffset="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>
  <cl-transformation overlay="cloudinary_icon" width="0.9" flags="relative" opacity="40">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(300).Radius("max").Effect("sharpen").StartOffset("30p").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Width(0.9).Flags("relative").Opacity(40)).BuildImageTag("dog.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(300).radius("max").effect("sharpen").startOffset("30p").crop("fill").chain()
  .overlay(new Layer().publicId("cloudinary_icon")).width(0.9).flags("relative").opacity(40)).resourceType("video").generate("dog.jpg");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(300).setHeight(300).setRadius("max").setEffect("sharpen").setStartOffset("30p").setCrop("fill").chain()
  .setOverlay("cloudinary_icon").setWidth(0.9).setFlags("relative").setOpacity(40)).generate("dog.jpg")
300x300 thumbnail of frame at 30% of dog.mp4 with watermark

Video player

The Cloudinary video player is an easy-to-implement responsive JavaScript-based player. It's based on the VideoJS open-source framework, bundled with several valuable plug-ins and additional Cloudinary functionality on top.. The player is fully integrated with Cloudinary's video delivery and manipulation solution. For example, you can: