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:

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 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"));

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 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"))));

Video manipulation and delivery

Cloudinary's 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 jQuery .Net All

URL:

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

Ruby:

cl_video_tag("dog", :width=>400)

PHP:

cl_video_tag("dog", array("width"=>400))

Python:

CloudinaryVideo("dog").video(width=400)

Node.js:

cloudinary.video("dog", {width: 400})

Java:

cloudinary.url().transformation(new Transformation().width(400)).videoTag("dog")

jQuery:

$.cloudinary.video("dog", {width: 400})

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(400)).BuildVideoTag("dog")

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 jQuery .Net All

URL:

http://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("cloudinary_icon").width(0.8).flags("relative").effect("brightness:200").opacity(50)).videoTag("dog")

jQuery:

$.cloudinary.video("dog", {transformation: [
  {width: 300, height: 300, crop: "fill"},
  {overlay: "cloudinary_icon", width: 0.8, flags: "relative", effect: "brightness:200", opacity: 50}
  ]})

.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:

URL Ruby PHP Python Node.js Java jQuery .Net All

URL:

http://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("cloudinary_icon").width(0.9).flags("relative").opacity(40)).resourceType("video").imageTag("dog.jpg")

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}
  ]})

.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")