{"id":22340,"date":"2021-05-03T14:36:46","date_gmt":"2021-05-03T14:36:46","guid":{"rendered":"http:\/\/video_uploads_with_cloudinary"},"modified":"2025-10-16T10:18:50","modified_gmt":"2025-10-16T17:18:50","slug":"video_uploads_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/video_uploads_with_cloudinary","title":{"rendered":"Video Uploads With Cloudinary"},"content":{"rendered":"

Cloudinary makes the video upload simple, helping you get your videos up to your web property faster. Without Cloudinary, setting up the infrastructure for video uploads can go from straightforward to complex real fast. Why? Because many challenges are involved in building a foolproof service for an efficient and smooth process. The Cloudinary Video<\/a> Upload API overcomes these speedbumps, making it easy to work with video upload and presentment.<\/p>\n

This article shows you how to set up the Cloudinary video widgets, the API, and the Media Library UI and get your video on your site quickly and easily. There\u2019s much more to explore with video tools in Cloudinary, so check out our full series of articles about marketing videos<\/a> when you\u2019re finished here.<\/p>\n

Platform Test for Video Uploads<\/h2>\n

Just as Stack Overflow cofounder Joel Spolsky did when he wrote the Joel Test for writing better software<\/a> over two decades ago, I\u2019ll share with you the seven questions that need robust answers for efficient video uploads on a web or mobile platform:<\/p>\n

    \n
  1. Can your video upload platform accept multiple video uploads at the same time?<\/li>\n
  2. Can your video upload platform gracefully restrict the size and formats of user-generated uploads?<\/li>\n
  3. Can your video upload platform crop, manipulate, and transform video uploads on the fly before storage?<\/li>\n
  4. Can your video upload platform chunk videos, especially large ones, during upload?<\/li>\n
  5. Can your video upload platform compress and optimize videos on or after upload, e.g., optimize a 50-MB video to one that weighs 15 MB only without any noticeable quality changes?<\/li>\n
  6. Can your video upload platform convert videos from one encoding format to another, e.g., from .mov<\/code> to .mp4<\/code>?<\/li>\n
  7. Can your video upload platform store and accept as many videos as possible while your audience exponentially grows? For example, the storage capacity of YouTube is, incredibly, around 1 exabyte (1 trillion GB). Even if your platform is not on this scale, it should at least be scalable to approximately 1 petabyte (1 million GB).<\/li>\n<\/ol>\n

    Cloudinary as a media-management service offers numerous capabilities, including video uploads, and can answer the above questions with a resounding yes. As you ponder on those questions, I\u2019ll show you the four ways in which you can upload video to Cloudinary<\/a>.<\/p>\n

    Video Uploads With the Upload Widget<\/h2>\n

    Every app has a user interface called the front end. A snappy and intuitive interface is a must for video uploads. Cloudinary offers a slick, easy-to-use upload widget you can integrate into your app with only a few lines of code.<\/p>\n

    \"Image<\/p>\n

    Cloudinary Upload Widget<\/h3>\n

    To quickly set up the upload widget:<\/p>\n

    <button<\/span> id<\/span>=\"upload_widget\"<\/span> class<\/span>=\"cloudinary-button\"<\/span>><\/span>Upload Video Files<\/button<\/span>><\/span>\n\n<script<\/span> src<\/span>=\"https:\/\/widget.cloudinary.com\/v2.0\/global\/all.js\"<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span><\/script<\/span>><\/span>  \n\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>  \nvar<\/span> myWidget = cloudinary.createUploadWidget({\n  cloudName<\/span>: 'my_cloud_name'<\/span>, \n  uploadPreset<\/span>: 'my_preset'<\/span>}, (error, result) => { \n    if<\/span> (!error && result && result.event === \"success\"<\/span>) { \n      console<\/span>.log('Done! Here is the image info: '<\/span>, result.info); \n    }\n  }\n)\n\ndocument<\/span>.getElementById(\"upload_widget\"<\/span>).addEventListener(\"click\"<\/span>, function<\/span>(<\/span>)<\/span>{\n    myWidget.open();\n  }, false<\/span>);\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    The upload widget supports the following out of the box:<\/p>\n
    \"Image<\/p>\n