In the present tutorial we are going to create a simple web application to handle video manipulation for the web, we will upload a video file to the cloud and perform live transcoding and transformations on-the-fly to created a tailored video file to stream on any device. For this we are going to use the Cloudinary service to store, transcode, transform and stream videos using in this case the available jQuery plugin.

“Are you developing a web or mobile application? Cloudinary is how you should manage your images.” This is an excerpt taken from the Cloudinary website’s About page. And in this tutorial, through the use of real examples and before/after comparisons, we will find out that this is not only true for images, but for videos as well.

In this tutorial we will create a tool to upload and transform videos using the uploaded file URL. We are only going to develop the JavaScript part to upload and transform the video files. Download the accompanying code to follow along.

Challenges When Dealing With Multimedia

I think we can safely agree that images and videos have a huge impact in today’s life, and besides the hassle of handling storage and delivery, we developers have to deal with a lot of overhead for, say, displaying a video on a website or mobile device. We have to take into account the size and format of the file, whether or not we should stream or download, file optimization and many other aspects, and this list just goes on and on when we add new targets and files.

Yes, multimedia plays a huge role in today’s applications, whether web-based or mobile, but this shouldn’t be the case in development time. When creating a new application, we need to be able to focus on its purpose, and not waste time with the hassle of storage and optimization of multimedia files. And this is precisely where Cloudinary comes to the rescue.

Cloudinary is a SaaS (Software as a Service) that handles all of the tasks related to image and video manipulation, such as upload, storage, optimization, delivery and even providing many other features such as image transformation, cropping, scaling, and face detection. And all transformations and transcoding are performed in real time and on-the-fly. Cloudinary uses Amazon S3 for file storage and integrates with leading Content Delivery Networks, such as Akamai to offer very efficient delivery.

In order to follow along you will need a Cloudinary account to upload video files and perform transformations, go ahead and create a free account.

Direct Browser Uploads

But that’s enough chit chat—let’s get our hands dirty and show some real examples of what we can do.

In any application that uses images and videos to engage users, the first task we have to take care of is file uploading. In order to follow along with the tutorial, go ahead and create a free account.

Enable Direct Unsigned Uploads

To upload files to a Cloudinary account, the requests need to have a request signature based on your API key and secret. However, there are cases when you need to support uploading files directly from the browser, without having to send the data to the back end to sign the request and upload the files, and this is where Direct unsigned upload takes place.

To enable it, in your Account Console navigate to Settings > Upload.

At the bottom of the page you will find an Upload presets setting and the Enable unsigned uploading option. We need to select it so that our application can upload files without having to sign the requests. This will create a new upload preset for which unsigned uploads are enabled. Take a note of the preset name as we will use it in a moment.

Upload a File

That’s it for the configuration part. Next we are going to perform the actual uploading of the file, and for that we will use Cloudinary’s jQuery plugin. Go to the download page and download it.

In order for it to work we must also have jQuery, and for direct browser uploads we also need some dependencies from the jQuery File Upload plugin. These dependencies already come with the Cloudinary plugin.

To upload a file directly from the browser, the only thing you need to do is enable Cloudinary in the file input field like so.

$( '.upload-file' ).unsigned_cloudinary_upload( 'UPLOAD_PRESET', {
    cloud_name  : 'CLOUD_NAME',
    tags        : 'UPLOAD_TAGS'
});

The UPLOAD_PRESET parameter is the name of the preset in which the Direct unsigned uploads are enabled, the one created in the previous step. The cloud name is a name assigned to all users in the Cloudinary system. This is obtained when creating an account and is displayed in the user’s dashboard. Lastly, the tags field is optional, and you can set a special tag to indicate that a file was uploaded from the browser directly.

Stream Uploaded Video

After uploading a video file, we now need to stream it to our users. The service will take care of optimizing and caching the file for fast delivery. In our controller method, add a couple of holders to store the source, name and the full path of the uploaded video.

var public_id	= '';

Then in order to display our video preview once the file is uploaded, we are going to bind an event listener to the unsigned_cloudinary_upload call. After the closing parenthesis append the following code.

.bind( 'cloudinarydone', function ( e, data ) {
    public_id   = data.result.public_id;
    $( '.video-title' ).html( data.result.original_filename );
    loadVideo();
});

Lastly we have to define the loadVideo method that will take care of setting the HTML5 video tag source and reload it. Inside the controller function, define a new loadVideo method:

loadVideo   = function () {
	$( '#video-container' ).html( $( $.cloudinary.video( public_id, {
        cloud_name  : 'CLOUD_NAME'
    }) ).attr( 'controls', 'controls' ).attr( 'autoplay', 'autoplay' ) );
};

Here we are using Cloudinary’s jQuery plugin to create the video tag of the uploaded video, once the HTML element is created we append the controls and autoplay paramters and finally add it to the video-container element. Note that we have to also set the cloud_name used to upload the video.

When uploaded Cloudinary automatically transforms and trasncodes every uploaded video to MP4, WebM and OGV required by web and mobile browsers, and also to FLV for flash.

We could leave it like that and it will work, but I’m going to introduce some UI transformation to give some feedback about what’s happening and set some helper cues for later transformations. Inside the cloudinarydone callback, below the loadVideo method call, add the following code.

$( '.help-block', $( '#upload-file' ).parent() ).hide();
$( '.help-block', $( '#video-width' ).parent() ).html( 'Max: ' + data.result.width );
$( '.help-block', $( '#video-height' ).parent() ).html( 'Max: ' + data.result.height );
$( '#transform-controls' ).slideDown();

Here we are just setting some helper strings to indicate the size of the uploaded video as a reference. Then we are displaying the form with the video transformation controls.

Lastly I want to introduce a message indicating that a video upload is in progress. At the closing parenthesis of the cloudinarydone event binder, add the following code.

.bind( 'cloudinarystart', function ( e, data ) {
    $( '.help-block', $( '#upload-file' ).parent() ).show().html( 'Uploading...' );
    $( '#transform-controls' ).hide();
});

This snippet just gives the user a little feedback of what’s happening behind the scenes and hides the video transformation controls.

Video Manipulation

So far so good—we can upload videos and have them displayed in the browser with just a couple of lines of code. But now for the real fun, let’s start making transformations to our video files just by modifying the URL we use to load it.

Resizing and Cropping

The most basic transformations that we can make with the uploaded video files are to change the width and height and customize how the cropping should be performed.

There are five parameters that control how a video file will be resized and cropped:

• Width: The width that the transformed video must have. URL parameter w.
• Height: The height that the transformed video must have. URL parameter h.
• Crop: How the cropping, if any, must be done when scaling the video. There are several options here: scale, fill, fit, limit, pad, lpad, crop. All of these tell Cloudinary how to resize the video. For instance, if a limit is set, the transformed video will have a maximum width of width and a maximum height of height while retaining the original proportions. URL parameter c.
• Gravity: This parameter specifies the portion of the video to use when crop is set to crop, pad and fill. Just as with crop, there are several options to set for this parameter: north_west, north, north_east, west, center, east, south_west, south, south_east. As you can imagine, this refers to left, right, top and bottom. For instance, specifying north_west will mean to take the top left portion of the original video when cropping. URL parameter g.
• Background: This property specifies the color to use when the transformed video has padding. When you set the width and height properties and the original file retains its proportions, padding will be used to fill the horizontal or vertical gaps generated, and with background you can set the color to use for that filling. Here you can specify the color as a string (red), or as a three- or six-character RGB code. In order to use RGB codes you need to specify it in the URL like so: rgb:ff0000. URL parameter b.

Those are the parameters used to resize a video file. For further explanation on each one, refer to the official documentation.

There are two ways in which Cloudinary performs transformations: lazily and eagerly.

A lazy transformation is applied on-the-fly when requesting an uploaded file. The first time a transformed file is accessed, the transformation is performed and the resulting file will be cached for future use.

An eager transformation is applied when the transformations are applied to the file as it uploads, so when it has finished uploading the transformed version is immediately available.

As a special note here, when you apply a lazy transformation for the first time, the file is streamed as the transformation occurs, so in the case of a video file, it starts playing right away while the transformation is done on-the-fly.

There’s an API and several SDKs to access all of the Cloudinary capabilities, in this example we are going to use the jQuery plugin for the video transformations.

So now let’s implement the necessary functionality in our application to perform and display transformations to our videos. The first thing to do is create a new holder in our controller for the transformations object. At the top of the variables declaration, add the following code:

var transform	= {
	cloud_name	: 'CLOUD_NAME'
};

Here we are setting the cloud_name attribute to a tranform object to set the rest of the transformation parameters.

In the loadVideo() method, we need to replace the $.cloudinary.video second parameter with the new transform object.

$( '#video-container' ).html( $( $.cloudinary.video( public_id, transform ) ).attr( 'controls', 'controls' ).attr( 'autoplay', 'autoplay' ) );

That’s all the preparation we need in order to resize our video files. If you check the HTML markup, you will note that the form containing the transformation fields invokes a scope method when submitted. We now are going to declare that method, so at the bottom of the controller add the following code:

$scope.update   = function () {
    var width       = $( '#video-width' ).val(),
        height      = $( '#video-height' ).val(),
      	crop        = $( 'input[name=crop]:checked' ).val(),
        gravity     = $( 'input[name=gravity]:checked' ).val(),
        background  = $( '#video-background' ).val();

    transform.crop  = crop;
    if ( width ) {
        transform.width         = width;
    }
    if ( height ) {
        transform.height        = height;
    }
    if ( gravity ) {
        transform.gravity       = gravity;
    }
    if ( background ) {
        transform.background    = background;
    }

    loadVideo();
};

This method is somewhat long, but what it does is create retrieve the transformation parameters introduced in the transformations form and set the appropriate parameters in the previously transform object.

When we update the video using the transformation form, the loadVideo method will be executed with the new transformation object. And the video will be updated.

Before moving on with the next transformations, we need to make sure to reset the transform object for every uploaded file, inside the cloudinarystart callback, add the following code.

transform       = {
	cloud_name  : 'CLOUD_NAME'
};

Here we are only re-setting the transform object to the initial state with just the cloud_name parameter set.

Video Rotation

Another transformation that can be performed is to rotate the streamed video. Just as with the resizing and cropping transformations, we can use one of the available SDKs or plugins, or we can use the URL to set the rotation parameters. For the jQuery plugin the parameter to rotate the generated video is angle.

Once again we have to set the rotation parameter for transform object, inside the update method declaration, just before the loadVideo call add the following code.

var angle	= $( #video-angle ).val();
	
if ( angle ) {
	transform.angle         = angle;
}

With this last snippet we can now perform rotation to our videos using the tranformation controls so it we were to rotate a video and resize it like the following.

Extra Transformations

There are many other transformations that can be applied to video files, including video transcoding, audio manipulation, overlay adding, and GIF transformation. For a complete list of the available parameters, refer to the official documentation.

Giveaway

We will be happy to give one lucky, randomly chosen reader, four months free for any of our off the shelf plans (you can see our plans here.

Simply tweet a link out to this post using the Twitter sharing button located on the sidebar.

Once the contest is over, Cloudinary will contact one lucky winner at random and will follow-up with you in order to claim your prize.

Conclusion

In this tutorial we perform video uploads and transformation using jQuery, but there are also a lot of other SDKs to easily integrate any application with the Cloudinary service. And all the transcoding and transformations are performed on the cloud without requiring any additional software, this makes the service a really viable and simple solution for media manipulation in mobile and web applications. For a complete list of all the available SDKs and plugins refer to the official documentation.

With Cloudinary we can handle images and videos very easily and reliably. It will take care of handling all the storage, optimization, transformation, caching and delivery.

All the transformations and manipulation performed in the tutorial can be also done using any of the available SDKs and plugins.

Leave your comments, questions, thoughts and suggestions in the comments section below.