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.

On this page:

Upload videos
Video manipulation and delivery
Video player

Upload videos

Cloudinary's cloud-based video management service enables video upload as follows:

Upload videos from server side code.
Directly upload videos from the browser.
Eagerly apply transformations to uploading videos.
Upload videos in chunks.
Apply incoming transformations before saving the file in the cloud.
Use upload presets to centrally control the video upload options.
Administer videos (rename, delete, tag).

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

Ruby PHP Python Node.js Java .Net All

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:

Pad to a width and height of 300 pixels, remove audio, normalize and optimize the video for web delivery.
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 PHP Python Node.js Java .Net All

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 cloud-based video management service enables simple video delivery and advanced video manipulation as follows:

Stream videos using simple URLs.
Embed videos in web pages.
Resize the video dimensions and crop to match your graphic design.
Trim the video and specify the section to keep.
Rotate the video.
Adjust the video settings: format, quality, bit rate and codec.
Control the audio codec and frequency, or remove the audio channel.
Create image thumbnails of any frame of the video, and further manipulate the image.
Add watermarks and image overlays.
Create dynamic text captions.
Convert the video to an animated GIF.

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

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_400/dog.webm

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:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_300,h_300,c_fill/l_cloudinary_icon,w_0.8,fl_relative,e_brightness:200,o_50/dog.mp4

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:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_300,h_300,c_fill,r_max,e_sharpen,so_30p/l_cloudinary_icon,w_0.9,fl_relative,o_40/dog.jpg

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: