jQuery video upload

jQuery video upload overview

As with images, Cloudinary’s video management solution enables you to upload videos to the cloud and perform manipulations. Cloudinary’s RESTful API and the jQuery-file-upload library (SDK) allows you to upload videos directly from the browser, or from a mobile app. You can transcode your videos to all relevant formats, apply a wide range of video transformations, and stream your optimized videos via CDN to web browsers and mobile devices.

The upload process for videos is generally the same as that for images, and you can apply essentially all image upload functionality to video as well. For details, see the JQuery image upload documentation.

This section provides an overview and examples of video upload functionality using JQuery.

For complete details on all video upload functionality, see Upload videos.
For the complete list of available upload parameters, see the Upload method of the Upload API Reference.

jQuery video upload functionality

The jQuery-file-upload SDK package enables you upload your videos to the cloud as a client-side direct upload from the browser or your mobile app. It requires the jQuery upload plugin and some configuration setup. For details, see Direct uploading from the browser.

You can also use the upload widget for uploads of user-generated video content.

Although most video transformations can be performed on-the-fly and the resulting video can stream even while the derived video is being generated, it can sometimes be a good idea to perform your transformations eagerly as part of the upload. This is especially true for longer videos, so that the final video is ready for fast delivery when the first user requests it.

For user-generated video content, consider utilizing incoming transformations and upload presets.

To avoid the risks of network issues, you can take advantage of the upload_large method, which uploads large videos to the cloud in chunks.

jQuery video upload example

The following example renders a an unsigned direct file upload input field using the unsigned_upload_tag helper method. The default resource_type for this method is auto, so it can be used for images, video, and raw files. The method defines a public_ID and tags for the uploaded file.

Note: This example assumes you have already included and configured the JQuery files as described in Direct uploading from the browser. It also assumes that my_upload_preset is defined as an unsigned preset for your account.

$.cloudinary.unsigneduploadtag("myuploadpreset", { publicid: "myvideo", tags: ["user_218", "screencast"] })