{"id":21917,"date":"2019-07-17T15:50:35","date_gmt":"2019-07-17T15:50:35","guid":{"rendered":"http:\/\/video_manipulations_and_delivery_for_angular_video_apps"},"modified":"2025-03-02T14:23:47","modified_gmt":"2025-03-02T22:23:47","slug":"video_manipulations_and_delivery_for_angular_video_apps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/video_manipulations_and_delivery_for_angular_video_apps","title":{"rendered":"Video Manipulations and Delivery for Angular Video Apps with Cloudinary"},"content":{"rendered":"

On social media, videos<\/a> posted by users constitute a significant amount of the content appeal on those platforms. From upload to manipulation to delivery, a smooth, efficient, and effective pipeline for the posting process is mandatory to ensure consistent user sessions and their steadily increasing volume. However, building such an infrastructure is a complex, labor-intensive, and problem-prone undertaking.<\/p>\n

Enter Cloudinary, whose capabilities impressively form such an infrastructure. This article shows you how to manipulate, transform, and deliver videos in Angular apps with Cloudinary\u2019s robust drop-in components.<\/p>\n

Installing the Angular SDK<\/h2>\n

To manipulate and transform videos while on Cloudinary, leverage the parameters in its Angular video component.<\/p>\n

First, install the Cloudinary SDK for your Angular version. Type this NPM command:<\/p>\n

npm<\/span> install<\/span> cloudinary-core<\/span> @cloudinary<\/span>\/angular-5.x --save\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Afterwards, import from the SDK the <cl-video><\/code> component, which places in your app an HTML 5 video player. That player plays videos\u2014whether in webm<\/code>, ogv<\/code>, or mp4<\/code> format\u2014without a glitch on all major web browsers.<\/p>\n
Note:<\/strong> 
AngularJS 1.x developers: You can obtain the <cl-video><\/code> component by typing this Bower command line:<\/p><\/div>\n
bower<\/span> install<\/span> cloudinary_ng<\/span>#1<\/span>.x<\/span> --save<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
You can now transform and manipulate videos with no need for a dedicated server. Read on for the specific tasks and their related procedures.<\/p>\n
Transcoding Video Formats<\/h3>\n
The format<\/code> parameter takes one of these three values: webm<\/code>, ogv<\/code>, and mp4<\/code>.<\/p>\n
For example, to transcode the existing format of an Angular video called cat<\/code> to the webm<\/code> format, code as follows:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"cat\"<\/span> format<\/span>=\"webm\"<\/span>><\/span>\n\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Concatenating Angular Videos<\/h3>\n
To concatenate multiple Angular videos by overlaying one on top of another, specify the related values for the overlay<\/code> parameter for the <cl-video><\/code> and <cl-transformation><\/code> components. For example:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"footballer\"<\/span> ><\/span>\n  <cl-transformation<\/span> width<\/span>=\"400\"<\/span> height<\/span>=\"250\"<\/span> crop<\/span>=\"fill\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n  <cl-transformation<\/span> overlay<\/span>=\"video:ball\"<\/span> flags<\/span>=\"splice\"<\/span> width<\/span>=\"300\"<\/span> height<\/span>=\"200\"<\/span> crop<\/span>=\"fill\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Adjusting Video Quality<\/h3>\n
The quality<\/code> parameter takes any value between 0 and 100. The lower the value, the smaller the video size. By specifying a value for quality<\/code>, you set the level of quality you desire for the video size at delivery.<\/p>\n
For example:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"drink\"<\/span> ><\/span>\n  <cl-transformation<\/span> quality<\/span>=\"60\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Controlling the Playback Speed<\/h3>\n
While playing videos, users often accelerate or reduce the playback speed to accommodate various scenarios. For example, to watch as many course videos offered by a time-limited subscription as possible, a user might choose to skim through some of them.<\/p>\n
To enable control of playback speed, specify a value of between -50 and 100 for the accelerate<\/code> attribute in the effect<\/code> parameter.<\/p>\n
Note:<\/strong> 
That value applies to both acceleration and deceleration. For example:<\/p><\/div>\n
<cl-video<\/span> public-id<\/span>=\"dog\"<\/span> ><\/span>\n  <cl-transformation<\/span> width<\/span>=\"300\"<\/span> effect<\/span>=\"accelerate:100\"<\/span> crop<\/span>=\"scale\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Generating Video Previews With AI<\/h3>\n
AI automatically identifies the appealing excerpts of a video and generates a preview version of the duration that you specify. Code as follows:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"afcon\"<\/span> ><\/span>\n  <cl-transformation<\/span> effect<\/span>=\"preview:duration_10\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The value 10<\/code> above denotes 10 minutes. You can specify any value between [?] and [?].<\/p>\n
Note:<\/strong> 
This feature, currently in Beta, truly rocks! Do take a spin with it. You\u2019ll be awed.<\/p><\/div>\n
Adding Captions and Subtitles<\/h3>\n
To add a caption to a video, specify the caption\u2019s font type, font size, wording, and such for the text<\/code> attribute in the overlay<\/code> parameter. Here is a self-explanatory code example:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"dog\"<\/span> ><\/span>\n  <cl-transformation<\/span> overlay<\/span>=\"text:arial_60:Angular%20Video\"<\/span> gravity<\/span>=\"south\"<\/span> y<\/span>=\"80\"<\/span> start-offset<\/span>=\"2\"<\/span> end-offset<\/span>=\"5\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
As soon as that video called dog starts playing, its text caption, Angular Video, is displayed.<\/p>\n
To add subtitles to a video as an overlay, specify in the overlay<\/code> parameter the font type and size that you desire along with the name of the related SRT file. For example:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"cat\"<\/span> ><\/span>\n  <cl-transformation<\/span> overlay<\/span>=\"subtitles:arial_20:sample_sub_en.srt\"<\/span>><\/span>\n  <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Reminder:<\/strong> Be sure to upload the SRT.srt<\/code> file to Cloudinary first.<\/p>\n
For other transformations you can apply to Angular videos, see the related documentation<\/a>.<\/p>\n
Browsing Other References<\/h2>\n
The following Cloudinary documentation contains many nuances that are worth a look:<\/p>\n