They say that a picture is worth a thousand words. For modern websites, a video surely takes the visual impact to a whole new level.

Nowadays, people enjoy the amazing capability of shooting videos with smartphone cameras that easily fit in their back pockets and are accessible nearly everywhere. Modern web applications have an opportunity to dramatically increase their visual impact by showcasing these videos online. Between news reports, user shared video snippets, explainer videos and ad campaigns, we see more and more videos appearing daily in our visited websites.

Supporting the backend required to transcode these videos from non-normalized hi-res originals over to HTML5 web friendly video formats is a non-trivial technical process. Many developers spend considerable time building in-house solutions to solve these redundant tasks.

Cloudinary's image asset management service was publicly launched about 3 years ago. Since then it has become the leading cloud-based image solution, simplifying the life of more than 50,000 developers by leveraging Cloudinary's end-to-end solution: image upload, cloud storage, powerful administration, image manipulation and fast CDN delivery. All that with simple one liners of code that developers love.

Webinar

Throughout the years we've been asked by our customers for a solution for video clips. People were searching for 'Cloudinary for video'. Today we are excited to introduce Cloudinary's new video asset management solution, an end-to-end cloud-based video asset management service that joins our image asset management service, shares the same concepts, usage simplicity, high performance and strong integration with web and mobile development frameworks, and improves your website's loading speed while reducing your bandwidth requirements and IT costs.

Here's a short overview video of Cloudinary's video management solution (make sure to turn on your speakers :-)

Cloudinary's service aims to cover all image and video related needs. With a single line of code, developers can start uploading media files to the cloud and with another line of code add dynamically generated image or video content to their site, matching their graphic design and product requirements.

The video asset management service currently supports the following:

An API for uploading any media files , including images and videos from your back-end application or directly from the browser or mobile application .

Automatic video transcoding and normalization for optimized viewing on all web browsers and mobile devices, improving your website's loading speed while reducing your bandwidth requirements and IT costs .

A rich set of video manipulation capabilities : scale up or down, crop, rotate, modify quality, adjust video codec settings, control bit rate, video trimming, thumbnail generation, conversion to animated GIF and lots more.

Dynamic delivery URLs with on-the-fly transcoding and real-time manipulation while streaming the video content.

Worldwide CDN delivery with streaming support for best performance.

An Interactive Media Library for browsing through your media files.

SDKs for all popular web and mobile development frameworks for easy integration with HTML5 sites and mobile apps.

We eliminate video asset management hassle and R&D work on your side as we have done for images, while providing plenty of features for achieving more advanced results.

You can let your users upload video files of any common format to the cloud using an authenticated API or directly from a browser or mobile application.

The following code sample in Ruby on Rails, PHP, Node.js and other frameworks performs uploading to the cloud:

Ruby: Copy to clipboard Cloudinary :: Uploader .upload(file, :resource_type => :video , :public_id => " dog " ) PHP: Copy to clipboard \ Cloudinary \ Uploader ::upload( file , array ( " resource_type " => " video " , " public_id " => " dog " )); Python: Copy to clipboard cloudinary.uploader.upload( file , resource_type = " video " , public_id = " dog " ) Node.js: Copy to clipboard cloudinary.uploader.upload(file, function (result) {console.log(result); }, { resource_type : " video " , public_id : " dog " }); Java: Copy to clipboard cloudinary.uploader().upload(file, ObjectUtils.asMap( " resource_type " , " video " , " public_id " , " dog " ));

The original video is stored in the cloud and available for streaming delivery via Akamai's CDN. You can then transcode the video to the three main formats supported by web and mobile browsers (MP4, WebM, OGV), while significantly optimizing their size for faster loading. Simply set the file format extension to .mp4 , .webm and .ogv . Setting the video_codec parameter ( vc in URLs) to auto will apply the best codec settings for web viewing even if the original format was already one of the three main formats.

The example below delivers an MP4 video while optimizing it for web. The video file size was reduced from 9.1MB to 2.7MB, which means a saving of 70% on bandwidth and loading time while maintaining the same visual quality.

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ vc_auto/ dog.mp4 Ruby: Copy to clipboard cl_video_tag( " dog " , :video_codec => " auto " ) PHP: Copy to clipboard cl_video_tag( " dog " , array ( " video_codec " => " auto " )) Python: Copy to clipboard CloudinaryVideo( " dog " ).video(video_codec= " auto " ) Node.js: Copy to clipboard cloudinary.video( " dog " , { video_codec : " auto " }) Java: Copy to clipboard cloudinary.url().transformation( new Transformation().videoCodec( " auto " )).videoTag( " dog " ); JS: Copy to clipboard cloudinary.videoTag( ' dog ' , { videoCodec : " auto " }).toHtml(); jQuery: Copy to clipboard $ .cloudinary.video( " dog " , { video_codec : " auto " }) React: Copy to clipboard <Video publicId = " dog " > <Transformation videoCodec = " auto " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog " > <cld-transformation videoCodec = " auto " /> </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog " > <cl-transformation video-codec = " auto " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation().VideoCodec( " auto " )).BuildVideoTag( " dog " ) Android: Copy to clipboard MediaManager.get().url().transformation( new Transformation().videoCodec( " auto " )).resourceType( " video " ).generate( " dog.mp4 " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation().setVideoCodec( " auto " )).generate( " dog.mp4 " )

As you can see below, converting to other video formats such as WebM is done by simply setting the file format extension of the URL to .webm .

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ dog.webm Ruby: Copy to clipboard cl_video_tag( " dog " ) PHP: Copy to clipboard cl_video_tag( " dog " ) Python: Copy to clipboard CloudinaryVideo( " dog " ).video() Node.js: Copy to clipboard cloudinary.video( " dog " ) Java: Copy to clipboard cloudinary.url().videoTag( " dog " ); JS: Copy to clipboard cloudinary.videoTag( ' dog ' ).toHtml(); jQuery: Copy to clipboard $ .cloudinary.video( " dog " ) React: Copy to clipboard <Video publicId = " dog " > </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog " > </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog " > </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.BuildVideoTag( " dog " ) Android: Copy to clipboard MediaManager.get().url().resourceType( " video " ).generate( " dog.webm " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).generate( " dog.webm " )

You can further control the video quality, bit rate, video codec and audio quality of the generated video. See our documentation of Video asset management and Upload videos for more details.

You can add transformation instructions to delivery URLs in order to manipulate the videos to match your graphic design and your users' specific devices. New requested videos are manipulated on-the-fly in real-time in the cloud. For larger videos you can pre-generate all manipulated derived versions eagerly while uploading.

We also provide a rich set of video manipulation capabilities in addition to the video format conversion that was mentioned above. The manipulation capabilities and their URL-based API are the same as Cloudinary's image manipulation capabilities.

Setting custom width and height parameters can scale your videos up or down. For example, delivering the same video scaled to 200x200 pixels:

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ w_200,h_200,c_scale/ dog.mp4 Ruby: Copy to clipboard cl_video_tag( " dog " , :width => 200 , :height => 200 , :crop => " scale " ) PHP: Copy to clipboard cl_video_tag( " dog " , array ( " width " => 200 , " height " => 200 , " crop " => " scale " )) Python: Copy to clipboard CloudinaryVideo( " dog " ).video(width= 200 , height= 200 , crop= " scale " ) Node.js: Copy to clipboard cloudinary.video( " dog " , { width : 200 , height : 200 , crop : " scale " }) Java: Copy to clipboard cloudinary.url().transformation( new Transformation().width( 200 ).height( 200 ).crop( " scale " )).videoTag( " dog " ); JS: Copy to clipboard cloudinary.videoTag( ' dog ' , { width : 200 , height : 200 , crop : " scale " }).toHtml(); jQuery: Copy to clipboard $ .cloudinary.video( " dog " , { width : 200 , height : 200 , crop : " scale " }) React: Copy to clipboard <Video publicId = " dog " > <Transformation width = " 200 " height = " 200 " crop = " scale " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog " > <cld-transformation width = " 200 " height = " 200 " crop = " scale " /> </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog " > <cl-transformation width = " 200 " height = " 200 " crop = " scale " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation().Width( 200 ).Height( 200 ).Crop( " scale " )).BuildVideoTag( " dog " ) Android: Copy to clipboard MediaManager.get().url().transformation( new Transformation().width( 200 ).height( 200 ).crop( " scale " )).resourceType( " video " ).generate( " dog.mp4 " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation().setWidth( 200 ).setHeight( 200 ).setCrop( " scale " )).generate( " dog.mp4 " )

Videos can be cropped using various modes and gravities. For example, the following dynamic manipulation URL crops the original image to fill a 200x200 square with north gravity.

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ w_200,h_200,c_fill,g_north/ dog.mp4 Ruby: Copy to clipboard cl_video_tag( " dog " , :width => 200 , :height => 200 , :gravity => " north " , :crop => " fill " ) PHP: Copy to clipboard cl_video_tag( " dog " , array ( " width " => 200 , " height " => 200 , " gravity " => " north " , " crop " => " fill " )) Python: Copy to clipboard CloudinaryVideo( " dog " ).video(width= 200 , height= 200 , gravity= " north " , crop= " fill " ) Node.js: Copy to clipboard cloudinary.video( " dog " , { width : 200 , height : 200 , gravity : " north " , crop : " fill " }) Java: Copy to clipboard cloudinary.url().transformation( new Transformation().width( 200 ).height( 200 ).gravity( " north " ).crop( " fill " )).videoTag( " dog " ); JS: Copy to clipboard cloudinary.videoTag( ' dog ' , { width : 200 , height : 200 , gravity : " north " , crop : " fill " }).toHtml(); jQuery: Copy to clipboard $ .cloudinary.video( " dog " , { width : 200 , height : 200 , gravity : " north " , crop : " fill " }) React: Copy to clipboard <Video publicId = " dog " > <Transformation width = " 200 " height = " 200 " gravity = " north " crop = " fill " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog " > <cld-transformation width = " 200 " height = " 200 " gravity = " north " crop = " fill " /> </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog " > <cl-transformation width = " 200 " height = " 200 " gravity = " north " crop = " fill " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation().Width( 200 ).Height( 200 ).Gravity( " north " ).Crop( " fill " )).BuildVideoTag( " dog " ) Android: Copy to clipboard MediaManager.get().url().transformation( new Transformation().width( 200 ).height( 200 ).gravity( " north " ).crop( " fill " )).resourceType( " video " ).generate( " dog.mp4 " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation().setWidth( 200 ).setHeight( 200 ).setGravity( " north " ).setCrop( " fill " )).generate( " dog.mp4 " )

As the example below shows, videos can be trimmed by specifying start_offset and end_offset , rotated using the angle parameter and have significantly reduced file size by controlling the quality parameter:

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ w_0.3,so_3.5,eo_10.7,a_20,q_40/ dog.mp4 Ruby: Copy to clipboard cl_video_tag( " dog " , :width => 0.3 , :start_offset => " 3.5 " , :end_offset => " 10.7 " , :angle => 20 , :quality => 40 , :crop => " scale " ) PHP: Copy to clipboard cl_video_tag( " dog " , array ( " width " => 0.3 , " start_offset " => " 3.5 " , " end_offset " => " 10.7 " , " angle " => 20 , " quality " => 40 , " crop " => " scale " )) Python: Copy to clipboard CloudinaryVideo( " dog " ).video(width= 0.3 , start_offset= " 3.5 " , end_offset= " 10.7 " , angle= 20 , quality= 40 , crop= " scale " ) Node.js: Copy to clipboard cloudinary.video( " dog " , { width : " 0.3 " , start_offset : " 3.5 " , end_offset : " 10.7 " , angle : 20 , quality : 40 , crop : " scale " }) Java: Copy to clipboard cloudinary.url().transformation( new Transformation().width( 0.3 ).startOffset( " 3.5 " ).endOffset( " 10.7 " ).angle( 20 ).quality( 40 ).crop( " scale " )).videoTag( " dog " ); JS: Copy to clipboard cloudinary.videoTag( ' dog ' , { width : " 0.3 " , startOffset : " 3.5 " , endOffset : " 10.7 " , angle : 20 , quality : 40 , crop : " scale " }).toHtml(); jQuery: Copy to clipboard $ .cloudinary.video( " dog " , { width : " 0.3 " , start_offset : " 3.5 " , end_offset : " 10.7 " , angle : 20 , quality : 40 , crop : " scale " }) React: Copy to clipboard <Video publicId = " dog " > <Transformation width = " 0.3 " startOffset = " 3.5 " endOffset = " 10.7 " angle = " 20 " quality = " 40 " crop = " scale " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog " > <cld-transformation width = " 0.3 " startOffset = " 3.5 " endOffset = " 10.7 " angle = " 20 " quality = " 40 " crop = " scale " /> </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog " > <cl-transformation width = " 0.3 " start-offset = " 3.5 " end-offset = " 10.7 " angle = " 20 " quality = " 40 " crop = " scale " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation().Width( 0.3 ).StartOffset( " 3.5 " ).EndOffset( " 10.7 " ).Angle( 20 ).Quality( 40 ).Crop( " scale " )).BuildVideoTag( " dog " ) Android: Copy to clipboard MediaManager.get().url().transformation( new Transformation().width( 0.3 ).startOffset( " 3.5 " ).endOffset( " 10.7 " ).angle( 20 ).quality( 40 ).crop( " scale " )).resourceType( " video " ).generate( " dog.mp4 " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation().setWidth( 0.3 ).setStartOffset( " 3.5 " ).setEndOffset( " 10.7 " ).setAngle( 20 ).setQuality( 40 ).setCrop( " scale " )).generate( " dog.mp4 " )

Image overlays can be added using the overlay parameter as well as dynamic text overlays of any font and style. Multiple overlays can be added at different times for different durations. In addition, the audio channel can be removed by setting audio_codec to none .

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ ac_none,w_500/l_cloudinary_icon,g_north_east,e_brightness:200,o_40,x_5,y_5,w_120/l_text:Roboto_34px_bold:Cute Dog,co_white,g_west,x_10,so_3/ dog.mp4 Ruby: Copy to clipboard cl_video_tag( " dog " , :transformation =>[ { :audio_codec => " none " , :width => 500 , :crop => " scale " }, { :overlay => " cloudinary_icon " , :gravity => " north_east " , :effect => " brightness:200 " , :opacity => 40 , :x => 5 , :y => 5 , :width => 120 }, { :overlay =>{ :font_family => " Roboto " , :font_size => 34 , :font_weight => " bold " , :text => " Cute%20Dog " }, :color => " white " , :gravity => " west " , :x => 10 , :start_offset => " 3 " } ]) PHP: Copy to clipboard cl_video_tag( " dog " , array ( " transformation " => array ( array ( " audio_codec " => " none " , " width " => 500 , " crop " => " scale " ), array ( " overlay " => " cloudinary_icon " , " gravity " => " north_east " , " effect " => " brightness:200 " , " opacity " => 40 , " x " => 5 , " y " => 5 , " width " => 120 ), array ( " overlay " => array ( " font_family " => " Roboto " , " font_size " => 34 , " font_weight " => " bold " , " text " => " Cute%20Dog " ), " color " => " white " , " gravity " => " west " , " x " => 10 , " start_offset " => " 3 " ) ))) Python: Copy to clipboard CloudinaryVideo( " dog " ).video(transformation=[ { ' audio_codec ' : " none " , ' width ' : 500 , ' crop ' : " scale " }, { ' overlay ' : " cloudinary_icon " , ' gravity ' : " north_east " , ' effect ' : " brightness:200 " , ' opacity ' : 40 , ' x ' : 5 , ' y ' : 5 , ' width ' : 120 }, { ' overlay ' : { ' font_family ' : " Roboto " , ' font_size ' : 34 , ' font_weight ' : " bold " , ' text ' : " Cute%20Dog " }, ' color ' : " white " , ' gravity ' : " west " , ' x ' : 10 , ' start_offset ' : " 3 " } ]) Node.js: Copy to clipboard cloudinary.video( " dog " , { transformation : [ { audio_codec : " none " , width : 500 , crop : " scale " }, { overlay : " cloudinary_icon " , gravity : " north_east " , effect : " brightness:200 " , opacity : 40 , x : 5 , y : 5 , width : 120 }, { overlay : { font_family : " Roboto " , font_size : 34 , font_weight : " bold " , text : " Cute%20Dog " }, color : " white " , gravity : " west " , x : 10 , start_offset : " 3 " } ]}) Java: Copy to clipboard cloudinary.url().transformation( new Transformation() .audioCodec( " none " ).width( 500 ).crop( " scale " ).chain() .overlay( new Layer().publicId( " cloudinary_icon " )).gravity( " north_east " ).effect( " brightness:200 " ).opacity( 40 ).x( 5 ).y( 5 ).width( 120 ).chain() .overlay( new TextLayer().fontFamily( " Roboto " ).fontSize( 34 ).fontWeight( " bold " ).text( " Cute%20Dog " )).color( " white " ).gravity( " west " ).x( 10 ).startOffset( " 3 " )).videoTag( " dog " ); JS: Copy to clipboard cloudinary.videoTag( ' dog ' , { transformation : [ { audioCodec : " none " , width : 500 , crop : " scale " }, { overlay : new cloudinary.Layer().publicId( " cloudinary_icon " ), gravity : " north_east " , effect : " brightness:200 " , opacity : 40 , x : 5 , y : 5 , width : 120 }, { overlay : new cloudinary.TextLayer().fontFamily( " Roboto " ).fontSize( 34 ).fontWeight( " bold " ).text( " Cute%20Dog " ), color : " white " , gravity : " west " , x : 10 , startOffset : " 3 " } ]}).toHtml(); jQuery: Copy to clipboard $ .cloudinary.video( " dog " , { transformation : [ { audio_codec : " none " , width : 500 , crop : " scale " }, { overlay : new cloudinary.Layer().publicId( " cloudinary_icon " ), gravity : " north_east " , effect : " brightness:200 " , opacity : 40 , x : 5 , y : 5 , width : 120 }, { overlay : new cloudinary.TextLayer().fontFamily( " Roboto " ).fontSize( 34 ).fontWeight( " bold " ).text( " Cute%20Dog " ), color : " white " , gravity : " west " , x : 10 , start_offset : " 3 " } ]}) React: Copy to clipboard <Video publicId = " dog " > <Transformation audioCodec = " none " width = " 500 " crop = " scale " /> <Transformation overlay = " cloudinary_icon " gravity = " north_east " effect = " brightness:200 " opacity = " 40 " x = " 5 " y = " 5 " width = " 120 " /> <Transformation overlay = { { fontFamily: " Roboto " , fontSize: 34 , fontWeight: " bold " , text: " Cute % 20Dog " } } color = " white " gravity = " west " x = " 10 " startOffset = " 3 " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog " > <cld-transformation audioCodec = " none " width = " 500 " crop = " scale " /> <cld-transformation overlay = " cloudinary_icon " gravity = " north_east " effect = " brightness:200 " opacity = " 40 " x = " 5 " y = " 5 " width = " 120 " /> <cld-transformation overlay = { { fontFamily: " Roboto " , fontSize: 34 , fontWeight: " bold " , text: " Cute % 20Dog " } } color = " white " gravity = " west " x = " 10 " startOffset = " 3 " /> </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog " > <cl-transformation audio-codec = " none " width = " 500 " crop = " scale " > </cl-transformation> <cl-transformation overlay = " cloudinary_icon " gravity = " north_east " effect = " brightness:200 " opacity = " 40 " x = " 5 " y = " 5 " width = " 120 " > </cl-transformation> <cl-transformation overlay = " text:Roboto_34px_bold:Cute%20Dog " color = " white " gravity = " west " x = " 10 " start-offset = " 3 " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation() .AudioCodec( " none " ).Width( 500 ).Crop( " scale " ).Chain() .Overlay( new Layer().PublicId( " cloudinary_icon " )).Gravity( " north_east " ).Effect( " brightness:200 " ).Opacity( 40 ).X( 5 ).Y( 5 ).Width( 120 ).Chain() .Overlay( new TextLayer().FontFamily( " Roboto " ).FontSize( 34 ).FontWeight( " bold " ).Text( " Cute%20Dog " )).Color( " white " ).Gravity( " west " ).X( 10 ).StartOffset( " 3 " )).BuildVideoTag( " dog " ) Android: Copy to clipboard MediaManager.get().url().transformation( new Transformation() .audioCodec( " none " ).width( 500 ).crop( " scale " ).chain() .overlay( new Layer().publicId( " cloudinary_icon " )).gravity( " north_east " ).effect( " brightness:200 " ).opacity( 40 ).x( 5 ).y( 5 ).width( 120 ).chain() .overlay( new TextLayer().fontFamily( " Roboto " ).fontSize( 34 ).fontWeight( " bold " ).text( " Cute%20Dog " )).color( " white " ).gravity( " west " ).x( 10 ).startOffset( " 3 " )).resourceType( " video " ).generate( " dog.mp4 " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation() .setAudioCodec( " none " ).setWidth( 500 ).setCrop( " scale " ).chain() .setOverlay( " cloudinary_icon " ).setGravity( " north_east " ).setEffect( " brightness:200 " ).setOpacity( 40 ).setX( 5 ).setY( 5 ).setWidth( 120 ).chain() .setOverlay( " text:Roboto_34px_bold:Cute%20Dog " ).setColor( " white " ).setGravity( " west " ).setX( 10 ).setStartOffset( " 3 " )).generate( " dog.mp4 " )

Web apps that embed videos usually prefer to display thumbnails (poster images) of user uploaded videos with a play button for loading and playing the video interactively. You can generate thumbnails of uploaded videos by simply setting the file format extension to an image format such as jpg . You can also specify any image dimensions and crop mode, as the following 300x150 example shows:

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ w_300,h_150,c_fill/ dog.jpg Ruby: Copy to clipboard cl_image_tag( " dog.jpg " , :width => 300 , :height => 150 , :crop => " fill " , :resource_type => " video " ) PHP: Copy to clipboard cl_image_tag( " dog.jpg " , array ( " width " => 300 , " height " => 150 , " crop " => " fill " , " resource_type " => " video " )) Python: Copy to clipboard CloudinaryVideo( " dog.jpg " ).image(width= 300 , height= 150 , crop= " fill " ) Node.js: Copy to clipboard cloudinary.image( " dog.jpg " , { width : 300 , height : 150 , crop : " fill " , resource_type : " video " }) Java: Copy to clipboard cloudinary.url().transformation( new Transformation().width( 300 ).height( 150 ).crop( " fill " )).resourceType( " video " ).imageTag( " dog.jpg " ); JS: Copy to clipboard cloudinary.videoTag( ' dog.jpg ' , { width : 300 , height : 150 , crop : " fill " }).toHtml(); jQuery: Copy to clipboard $ .cloudinary.image( " dog.jpg " , { width : 300 , height : 150 , crop : " fill " , resource_type : " video " }) React: Copy to clipboard <Video publicId = " dog.jpg " resourceType = " video " > <Transformation width = " 300 " height = " 150 " crop = " fill " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog.jpg " resourceType = " video " > <cld-transformation width = " 300 " height = " 150 " crop = " fill " /> </cld-video> Angular: Copy to clipboard <cl-video public-id = " dog.jpg " resource-type = " video " > <cl-transformation width = " 300 " height = " 150 " crop = " fill " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation().Width( 300 ).Height( 150 ).Crop( " fill " )).BuildImageTag( " dog.jpg " ) Android: Copy to clipboard MediaManager.get().url().transformation( new Transformation().width( 300 ).height( 150 ).crop( " fill " )).resourceType( " video " ).generate( " dog.jpg " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation().setWidth( 300 ).setHeight( 150 ).setCrop( " fill " )).generate( " dog.jpg " )

Custom thumbnails can be selected by specifying the start_offset parameter. Any image manipulations already supported by Cloudinary can be further applied. The example below creates a 300x300 circular cropped thumbnail of the frame at 30% of the video and adds a semi-transparent watermark:

URL: Copy to clipboard https://res.cloudinary.com/demo/ video/upload/ w_300,h_300,c_fill,r_max,e_sharpen,so_30p/l_cloudinary_icon,w_0.9,fl_relative,o_40/ dog.jpg Ruby: Copy to clipboard cl_image_tag( " dog.jpg " , :resource_type => " video " , :transformation =>[ { :width => 300 , :height => 300 , :radius => " max " , :effect => " sharpen " , :start_offset => " 30p " , :crop => " fill " }, { :overlay => " cloudinary_icon " , :width => 0.9 , :flags => " relative " , :opacity => 40 } ]) PHP: Copy to clipboard 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 " , " width " => 0.9 , " flags " => " relative " , " opacity " => 40 ) ))) Python: Copy to clipboard CloudinaryVideo( " dog.jpg " ).image(transformation=[ { ' width ' : 300 , ' height ' : 300 , ' radius ' : " max " , ' effect ' : " sharpen " , ' start_offset ' : " 30p " , ' crop ' : " fill " }, { ' overlay ' : " cloudinary_icon " , ' width ' : 0.9 , ' flags ' : " relative " , ' opacity ' : 40 } ]) Node.js: Copy to clipboard cloudinary.image( " dog.jpg " , { resource_type : " video " , transformation : [ { width : 300 , height : 300 , radius : " max " , effect : " sharpen " , start_offset : " 30p " , crop : " fill " }, { overlay : " cloudinary_icon " , width : " 0.9 " , flags : " relative " , opacity : 40 } ]}) Java: Copy to clipboard cloudinary.url().transformation( new Transformation() .width( 300 ).height( 300 ).radius( " max " ).effect( " sharpen " ).startOffset( " 30p " ).crop( " fill " ).chain() .overlay( new Layer().publicId( " cloudinary_icon " )).width( 0.9 ).flags( " relative " ).opacity( 40 )).resourceType( " video " ).imageTag( " dog.jpg " ); JS: Copy to clipboard cloudinary.videoTag( ' dog.jpg ' , { transformation : [ { width : 300 , height : 300 , radius : " max " , effect : " sharpen " , startOffset : " 30p " , crop : " fill " }, { overlay : new cloudinary.Layer().publicId( " cloudinary_icon " ), width : " 0.9 " , flags : " relative " , opacity : 40 } ]}).toHtml(); jQuery: Copy to clipboard $ .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 " ), width : " 0.9 " , flags : " relative " , opacity : 40 } ]}) React: Copy to clipboard <Video publicId = " dog.jpg " resourceType = " video " > <Transformation width = " 300 " height = " 300 " radius = " max " effect = " sharpen " startOffset = " 30p " crop = " fill " /> <Transformation overlay = " cloudinary_icon " width = " 0.9 " flags = " relative " opacity = " 40 " /> </Video> Vue.js: Copy to clipboard <cld-video publicId = " dog.jpg " resourceType = " video " > <cld-transformation width = " 300 " height = " 300 " radius = " max " effect = " sharpen " startOffset = " 30p " crop = " fill " /> <cld-transformation overlay = " cloudinary_icon " width = " 0.9 " flags = " relative " opacity = " 40 " /> </cld-video> Angular: Copy to clipboard <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 " width = " 0.9 " flags = " relative " opacity = " 40 " > </cl-transformation> </cl-video> .Net: Copy to clipboard cloudinary.Api.UrlVideoUp.Transform( new Transformation() .Width( 300 ).Height( 300 ).Radius( " max " ).Effect( " sharpen " ).StartOffset( " 30p " ).Crop( " fill " ).Chain() .Overlay( new Layer().PublicId( " cloudinary_icon " )).Width( 0.9 ).Flags( " relative " ).Opacity( 40 )).BuildImageTag( " dog.jpg " ) Android: Copy to clipboard 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 " )).width( 0.9 ).flags( " relative " ).opacity( 40 )).resourceType( " video " ).generate( " dog.jpg " ); iOS: Copy to clipboard cloudinary.createUrl().setResourceType( " video " ).setTransformation(CLDTransformation() .setWidth( 300 ).setHeight( 300 ).setRadius( " max " ).setEffect( " sharpen " ).setStartOffset( " 30p " ).setCrop( " fill " ).chain() .setOverlay( " cloudinary_icon " ).setWidth( 0.9 ).setFlags( " relative " ).setOpacity( 40 )).generate( " dog.jpg " )

There are plenty of additional video and image manipulation options that you can mix and match, we have shown only a few here just to give a taste. Check our documentation for more details and examples.

You can use Cloudinary's SDKs of all web frameworks for building manipulation URLs and embedding HTML5 video tags with all video sources and settings. The browser automatically selects a video format it supports, while the video files can be created dynamically when first accessed by your users. For example, the following view helper method adds an HTML5 video tag for all video formats, as well as a poster image:

Ruby: Copy to clipboard cl_video_tag( " dog " , :width => 300 , :height => 150 , :crop => :fill , :autoplay => true ) PHP: Copy to clipboard <?php echo cl_video_tag( " dog " , array ( " width " => 300 , " height " => 150 , " crop " => " fill " , " autoplay " => true )); ?> Python: Copy to clipboard cloudinary.CloudinaryVideo( " dog " ).video( width = 300 , height = 150 , crop = " fill " , autoplay = True ) Node.js: Copy to clipboard cloudinary.video( " dog " { width : 300 , height : 150 , crop : " fill " , autoplay : true }) Java: Copy to clipboard <cl:video src= " dog " width = " 300 " , height = " 150 " , crop = " fill " , autoplay = " true " />

This results with the following HTML code:

Copy to clipboard <video autoplay poster = ' https://res.cloudinary.com/demo/image/upload/w_300,h_150,c_fill/dog.jpg ' > <source src = ' https://res.cloudinary.com/demo/image/upload/w_300,h_150,c_fill/dog.webm ' type = ' video/webm ' > </source> <source src = ' https://res.cloudinary.com/demo/image/upload/w_300,h_150,c_fill/dog.mp4 ' type = ' video/mp4 ' > </source> <source src = ' https://res.cloudinary.com/demo/image/upload/w_300,h_150,c_fill/dog.ogv ' type = ' video/ogg ' > </source> </video>

Any web and mobile developer can now use the same API for uploading any media files, images or videos. The files are stored safely in the cloud and available for fast delivery using image and video optimization best practices. Dynamic transformations and manipulations can take place on-the-fly to match your graphic design and the various devices and browsers of your users.

Our target is to make the life of developers easier, while letting them easily leverage cutting edge image processing capabilities. Today we push this forward by supporting video clips as well and providing powerful video capabilities using very simple parameters.

We hope you will find our video solution as useful as we believe it is. We would appreciate any feedback you have. We have big plans for further enhancing the video asset management features as well as to keep enhancing the already rich image asset management features. Stay tuned for updates.

All video features mentioned in this post are now available for any Cloudinary plan, including the free tier. You can sign up to quickly set-up your Cloudinary account and try out all the image manipulation and video manipulation features.