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 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
:
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.
cloudinary.uploader().upload("dog.mp4", ObjectUtils.asMap("resource_type", "video", "eager", Arrays.asList( new EagerTransformation().width(300).height(300).crop("pad").audioCodec("none"), new EagerTransformation().width(160).height(100).crop("crop").gravity("south").audioCodec("none"))));
var uploadParams = new VideoUploadParams() { File = new FileDescription(@"dog.mp4"), ResourceType = "video" EagerTransforms = new List<Transformation>() { new EagerTransformation().Width(300).Height(300).Crop("pad").AudioCodec("none"), new EagerTransformation().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 or round the corners of the video.
- Adjust the video settings: format, quality, bit rate and codec.
- Control the audio in audio or video files.
- 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:
Example 2: Cropping the uploaded mp4 video to fill a 300x300 square and adding an image overlay as a watermark:
(new VideoTag('dog.mp4')) ->resize(Resize::fill()->width(300)->height(300)) ->overlay( Overlay::source(Source::image('cloudinary_icon_white') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(0.8)->relative()) ->adjust(Adjust::opacity(50)) ->adjust(Adjust::brightness()->level(200)) )));
cloudinary.video { publicId("dog.mp4") resize(Resize.fill() { width(300) height(300) }) overlay(Overlay.source(Source.image("cloudinary_icon_white") { transformation(ImageTransformation { resize(Resize.scale() { width(0.8f) relative() }) adjust(Adjust.opacity(50)) adjust(Adjust.brightness() { level(200) }) }) }))}.generate()
Example 3: Create a 300x300 circular cropped thumbnail of the frame at 30% of the video and adds a semi-transparent watermark:
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_blue", "width"=>"0.9", "flags"=>"relative", "opacity"=>40) )))
(new ImageTag('dog.jpg')) ->videoEdit(VideoEdit::trim()->startOffset('30%')) ->resize(Resize::fill()->width(300)->height(300)) ->roundCorners(RoundCorners::max()) ->adjust(Adjust::sharpen()) ->overlay( Overlay::source(Source::image('cloudinary_icon_blue') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(0.9)->relative()) ->adjust(Adjust::opacity(40))))) ->assetType(AssetType::VIDEO);
cloudinary.url().transformation(new Transformation() .width(300).height(300).radius("max").effect("sharpen").startOffset("30p").crop("fill").chain() .overlay(new Layer().publicId("cloudinary_icon_blue")).width(0.9).flags("relative").opacity(40)).resourceType("video").imageTag("dog.jpg");
$.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_blue"), width: "0.9", flags: "relative", opacity: 40} ]})
<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_blue" width="0.9" flags="relative" opacity="40"> </cl-transformation> </cl-video>
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(300).setHeight(300).setRadius("max").setEffect("sharpen").setStartOffset("30p").setCrop("fill").chain() .setOverlay("cloudinary_icon_blue").setWidth(0.9).setFlags("relative").setOpacity(40)).generate("dog.jpg")
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_blue")).width(0.9).flags("relative").opacity(40)).resourceType("video").generate("dog.jpg");
cloudinary.video { publicId("dog.jpg") videoEdit(VideoEdit.trim() { startOffset("30%") }) resize(Resize.fill() { width(300) height(300) }) roundCorners(RoundCorners.max()) adjust(Adjust.sharpen()) overlay(Overlay.source(Source.image("cloudinary_icon_blue") { transformation(ImageTransformation { resize(Resize.scale() { width(0.9f) relative() }) adjust(Adjust.opacity(40)) }) })) assetType("video")}.generate()

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: