{"id":21636,"date":"2017-11-28T13:00:06","date_gmt":"2017-11-28T13:00:06","guid":{"rendered":"http:\/\/introducing_the_complete_video_solution_for_web_and_mobile_developers"},"modified":"2025-07-20T09:14:57","modified_gmt":"2025-07-20T16:14:57","slug":"introducing_the_complete_video_solution_for_web_and_mobile_developers","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_the_complete_video_solution_for_web_and_mobile_developers","title":{"rendered":"Introducing the complete video solution for web and mobile developers"},"content":{"rendered":"

Videos<\/a> in web sites and apps are starting to catch up with images in terms of popularity and they are a constantly growing part of the media strategy for most organizations. This means bigger challenges for developers who need to handle these videos in their web sites and mobile apps. Cloudinary\u2019s mission is to solve all developer needs around image and video content management. In this blog post, we are excited to introduce Cloudinary\u2019s complete cloud-based video content management solution for developers.<\/p>\n

What does it include? Here are some highlights:<\/p>\n

\n\"upload\"\n
Video upload API and UI widget – upload your videos directly to cloud storage<\/div>\n<\/div>\n
<\/div>\n
\n\"UI\"\n
Programmable and interactive interface for managing video assets<\/div>\n<\/div>\n
<\/div>\n
\n\"transcoding\"\n
Real-time video transcoding and manipulation via CDN delivery URLs<\/div>\n<\/div>\n
<\/div>\n
\n\"video\n
Customizable video player with user engagement analytics See demo<\/a><\/div>\n<\/div>\n
<\/div>\n
\n\"live\n
Live video streaming directly from web and mobile apps See demo<\/a><\/div>\n<\/div>\n
<\/div>\n
\n\"AI\"\n
AI based video tagging and transcription<\/div>\n<\/div>\n
<\/div>\n

Website videos are becoming mainstream<\/h2>\n

Videos are now responsible for about 25% of the average download bandwidth of web sites (SpeedCurve analysis<\/a>). As you can see in the chart below, this reflects a huge growth of about 400%<\/strong> compared to just two years ago. 2017 is definitely the year of video and while <video> didn\u2019t kill the <img> tag and (probably) never will, managing and delivering videos in modern web sites and mobile apps involves growing complexities for developers.<\/p>\n

\"Video<\/p>\n

Video is the fastest-growing element of page real estate.<\/em> Source: SpeedCurve blog<\/a><\/p>\n

When Cloudinary\u2019s service was publicly launched back in 2012, our first mission was to solve image management needs for web and app developers: from uploading<\/strong> images from any device and storing<\/strong> them in the cloud, through manipulating<\/strong> the images on-the-fly to match any graphic design and screen resolution, to dynamically optimizing<\/strong> the images and delivering<\/strong> them via a fast CDN to worldwide users. Then, in May 2015, we expanded our solution and introduced Cloudinary\u2019s cloud-based service for video upload, real-time manipulation and optimized viewing<\/a>.<\/p>\n

Our new offer provided the same cloud-based service API for both images and videos. While the image management space keeps evolving, since 2015, we have also continued enhancing our video transcoding capabilities. Today, about 30%<\/strong> of Cloudinary\u2019s 5000<\/strong> paying customers already upload and manipulate tens of millions of videos every month, and this number is growing quite rapidly.<\/p>\n

The challenges developers face with the videos in their web sites tend to be more complex than images. The video files can be huge, which means longer upload & download times and very CPU-intensive transcoding and manipulation. The set of potential devices, resolutions, video formats and video codecs is large and confusing. The desired optimal user experience requires modern video players with user engagement statistics and, in some cases, also monetization capabilities.<\/p>\n

Today we are excited to introduce the next generation of our cloud-based video content management service<\/strong> – even more advanced real-time video transcoding together with a modern video player, live video streaming<\/a>, AI based video tagging and transcript, and more; All aimed at simplifying the video workflow for web and mobile developers while improving and enhancing the end-user experience.<\/p>\n

A complete video content management solution for developers<\/h2>\n

Whether you are delivering top quality professional videos or user-generated clips, whether you have an eCommerce site, news channel, travel forum, or advertising agency, the back-end challenges involved in quickly uploading and then delivering optimized, high quality video to any device in any location is always there, as are the challenges of adjusting the output to match your design needs, and providing a great front-end user experience. And all these challenges mount if you want to broadcast that video live or integrate and share that content in social networks.<\/p>\n

Cloudinary addresses all this and more by providing the following capabilities as part of a single, streamlined solution:<\/p>\n

Upload, storage and administration<\/h3>\n

An end-to-end solution for dynamic videos in web sites and apps starts from the ability to upload directly from the browser or mobile apps. A single line of code allows users to upload any image or video file<\/a> to the cloud without even going through your servers:<\/p>\n\n Loading code examples<\/span>\n <\/cld-code-widget>\n

You can also use our upload widget<\/a>, which provides a built-in user interface for your users to select and upload image and video files.<\/p>\n

Uploaded videos are stored securely in the cloud. Once uploaded, you can manage your cloud-based database of media files using our administrative API<\/a> or using Cloudinary\u2019s Digital Asset Management<\/a> user interface.<\/p>\n

Real-time video transcoding, manipulation and streaming<\/h3>\n

Video files might be uploaded in various different formats, codecs, resolutions and aspect ratios. These properties will most likely not match the design of your site and the various devices, browsers and resolutions your visitors use. Videos are delivered to web sites using HTTP\/S URLs. Cloudinary supports format conversion, video codec optimization, and resizing and cropping of videos using regular CDN delivery URLs. The video transcoding and manipulation is performed according to the instructions in the URL, while the video processing is done in real-time, on-the-fly, in the cloud when the first user accesses the URL.<\/p>\n

For example, below is a video as originally uploaded followed by a web friendly MP4 200×200 cropped version of the video. The transcoding and cropping is done on-the-fly by adding the w_200,h_200,c_fill,g_north<\/code> dynamic manipulation instructions to the video delivery URL.<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\n \n\n\n\n <\/video><\/p>\n

There are plenty of additional video manipulation<\/a> building blocks that you can mix & match to create your desired composite videos. These include effects, filters, overlays of images, videos and text, and more. Below you can see a more advanced example that applies a color saturation decrease filter and adds an image (watermark), as well as video and text overlays at selected times within the video.<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\n \n\n\n\n <\/video><\/p>\n

Videos can be converted to different formats simply by modifying the file extension. For example, changing the extension to \u2018.m3u8<\/a>\u2019 will automatically generate all the index files required for our built-in HLS and MPEG-DASH<\/strong> adaptive bitrate streaming<\/a>. You can see more online video transcoding examples in the following demo:<\/p>\n

https:\/\/demo.cloudinary.com\/video\/<\/a><\/p>\n

Customizable video player<\/h3>\n

The examples above demonstrated URL-based back-end techniques<\/strong> that you can use to generate and deliver videos. But we wanted to take it further and provide developers with a complete, yet simple solution for addressing the front-end video playing experience as well.<\/p>\n

A new Cloudinary Video Player<\/strong> is now publicly available. The player can be initiated with a single line of code that accepts a video ID and automatically builds video manipulation and delivery URLs. Web friendly video formats such as MP4 are used and HLS & MPEG-DASH adaptive bitrate streaming is automatically set-up.<\/p>\n

The video player can be initiated either using HTML markup or programmatically using JavaScript:<\/p>\n

 var<\/span> vplayer = cld.videoPlayer(\"demo-player\"<\/span>, {\n \u00a0\u00a0publicId<\/span>: 'rafting'<\/span>,\n \u00a0\u00a0loop<\/span>: true<\/span>,\n \u00a0\u00a0controls<\/span>: true<\/span>,\n \u00a0\u00a0autoplayMode<\/span>: 'on-scroll'<\/span>,\n \u00a0\u00a0transformation<\/span>: { width<\/span>: 400<\/span>, crop<\/span>: 'limit '<\/span> },\n \u00a0\u00a0posterOptions<\/span>: {publicId<\/span>: 'mypic'<\/span>, transformation { effect<\/span>: ['sepia'<\/span>]}},\n \u00a0\u00a0sourceTypes<\/span>: [\"hls\"<\/span>, \"mp4\"<\/span>],\n })\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The video player is an open source<\/a> project based on the popular VideoJS<\/a> open source video player, with its large ecosystem of plugins and customizations.<\/p>\n
Interactive examples of the video player can be found in our video player demo page:<\/p>\n
https:\/\/demo.cloudinary.com\/video-player\/<\/a><\/p>\n\"Video\n
Live video streaming with real-time transcoding<\/h3>\n
The common flow of first uploading videos and when done, delivering them to users is gradually clearing the way to a more advanced flow of live video streaming. Cloudinary now offers (beta) support for live streaming of video content directly from web sites and applications.<\/p>\n
Video transcoding and manipulation is done in real-time on the live stream exactly in the same way it is done on pre-uploaded videos – simultaneously generating multiple different versions out of the original video – different resolutions, cropping modes, encoding quality levels, watermarks, effects, personalized text overlays and more.<\/p>\n
Live streaming is based on the WebRTC protocol, and you can instruct Cloudinary to automatically stream the videos directly to Facebook<\/strong> or YouTube<\/strong> using the RTMP protocol.<\/p>\n
You can try out the full live streaming experience via the following mobile web demo application:<\/p>\n
https:\/\/demo.cloudinary.com\/live\/<\/a><\/p>\n
\"Live<\/p>\n
AI-based video tagging and transcription<\/h3>\n
If your web application has many videos or supports user-generated video content, smart video content management automation would make your life easier and might improve user engagement.<\/p>\n
Automatic video subtitle creation<\/h4>\n
Auto-playing muted video became very popular in news sites and social networks such as Facebook. New versions of web browsers even limit the auto playing capabilities and prevent auto-playing with sound. To make verbal videos effective even when muted, subtitles are necessary. And if you want to support uploading videos to a social feed with muted auto-play, you probably need the videos to have the subtitles already embedded in them.<\/p>\n
AI-based video transcript is now available as a fully integrated add-on<\/a> powered by Google\u2019s Cloud Speech API. By setting Cloudinary\u2019s raw_convert<\/code> upload API parameter to google_speech<\/code>, the audio channel of the video is automatically processed and a transcript file is generated in your media library.<\/p>\n
\nCloudinary<\/span>::Uploader.upload(\"lincoln.mp4\"<\/span>, :resource_type<\/span> =><\/span> :video, :raw_convert<\/span> \u00a0=><\/span> \"google_speech\"<\/span>)\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Generating a video with embedded subtitles based on automatic transcription is as simple as adding another parameter to your dynamic video delivery URL (in the example below, adding l_subtitles:lincoln.transcript<\/code>). You can even enhance the subtitles with additional options such as your choice of font, font size, color, etc. \u00a0The original video (which didn\u2019t include any subtitles), now includes automatically generated captions based on Google\u2019s speech to text AI engine.<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\n      \n\n\n\n    <\/video><\/p>\n
Automatic video tagging<\/h4>\n
It\u2019s a common practice to organize your media database or eCommerce product catalog by categorizing and tagging your images and videos to better match uploaded content to your users. Cloudinary now supports automatic AI-based tagging of uploaded videos.<\/p>\n
The automatic tagging is available as a fully integrated add-on<\/a> powered by Google\u2019s Cloud Video Intelligence. By setting Cloudinary\u2019s categorization<\/code> upload API parameter to google_video_tagging<\/code>, the video is automatically analyzed, and a list of detected tag categories is included in the response. \u00a0If you also set an auto-tagging<\/code> level, then any category that exceeds the requested confidence level automatically gets added to the resource\u2019s tag list.<\/p>\n
Cloudinary::Uploader.upload(\"turtle.mp4\"<\/span>, :resource_type<\/span> =><\/span> :video, :categorization<\/span> =><\/span> \"google_video_tagging\"<\/span>, :auto_tagging<\/span> =><\/span> 0.7<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Below is a sample response from the automatic tagging. Categories with a confidence level above the given threshold are automatically assigned. Following that, you can see the full list of all detected categories and the time segment that each suggested tag applies to. You can list, browse, delete and search images and videos by the automatically assigned tags, either via API or our interactive UI.<\/p>\n
\"tags\"<\/span>: [ \"turtle\"<\/span>, \"animal\"<\/span> ...],\n\"data\"<\/span>: [\n \u00a0{\"tag\"<\/span>: \"turtle\"<\/span>, \"start_time_offset\"<\/span>=>0.0<\/span>, \"end_time_offset\"<\/span>=>13.44<\/span>, \n \u00a0\u00a0\u00a0\"confidence\"<\/span>: 0.93<\/span>},\n \u00a0{\"tag\"<\/span>: \"animal\"<\/span>, \"start_time_offset\"<\/span>=>0.0<\/span>, \"end_time_offset\"<\/span>=>13.44<\/span>, \n \u00a0\u00a0\u00a0\"confidence\"<\/span>: 0.93<\/span>} ... \u00a0]\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Image and Video, not Image and video<\/i><\/sup><\/a><\/h2>\n
In the first couple of years after publicly launching Cloudinary in 2012, I wrote most of the technical blog posts that we published. But we\u2019ve grown, and it\u2019s been quite a while since I\u2019ve written one. When I decided to write this one introducing the next generation of our video solution, I thought that it would be a quick task\u2026<\/p>\n
Well, I was quite wrong – it was not quick at all. As you can see, trying to cover the highlights of the existing components and the new features of our video solution resulted in this longer-than-expected blog post, yet I still feel that I skipped so many cool features and use cases.<\/p>\n
As you probably already understand, we are proud of our enhanced Image and Video content Management service and its new capabilities. We even made a slight yet significant update on our home page to clearly show where video fits within our complete solution:<\/p>\n
\"Image<\/p>\n
↓<\/p>\n
\"Image<\/p>\n
We invite you to try out the video solution with its new capabilities and share your feedback (community page<\/a> or forums<\/a>). And for our part, we\u2019ll keep working to further build and enhance it according to your feature requests and suggestions.<\/p>\n
All video content management features are available now in all our plans including the free plan. You can create your free account<\/a> here.<\/p>\n
\n
Further Reading on Video Manipulation<\/h2>\n
<\/a><\/p>\n
The player has two built-in look & feel themes that can be further customized. It supports recommended videos suggestions and automatic playlist creation for a given tag assigned to multiple videos. You can track user engagement by monitoring events that can be automatically sent directly to analysis systems such as Google Analytics. See our video player documentation<\/a> for more details.<\/p>\n