JAVASCRIPT

How to build your own Youtube – Part 6


 Introduction: If you missed the earlier parts, in this series we are covering how to build your own YouTube clone, Click here.

Note: You need to have at least some prior experience with client-side Javascript frameworks  and Node.js to get the most out of this tutorial.

In the previous post, we looked at chunked video uploading, saving more video details, assigning tags to a video, video transformations like removing audio, displaying video dimensions, changing video background and also delivering the videos. Now, we’ll be  looking at video resizing & cropping, renaming, trimming, deleting, concatenating, rotating, and creating rounding corners/circular videos.

Video Resizing & Cropping

You can resize and crop videos in order to match the graphic design of your web site or mobile app. Whether videos are uploaded in your server-side code or by your users, the originals are stored in the cloud. You can then dynamically create multiple resized, cropped and manipulated videos on-the-fly and deliver them via dynamic URLs or use code to either add video tags or build the URLs.

Change the size of a video with the width and height parameters (w and h in URLs). You can resize the video by using both the width and height parameters or with only one of them (the other dimension is automatically updated to maintain the aspect ratio).

  • Using an integer value sets the new dimension to that number in pixels. For example, w_150sets the width to exactly 150 pixels.
  • Using a decimal value sets the new dimension as a multiple of the original dimension. For example, w_0.5 sets the width to half the original width.

So, resizing an uploaded video will be in this format:

Step 1: Add resizeVideo method

Open up server/controllers/upload.server.controller.js and add this like so:

Step 2: Update updateVideoDetails method

Open up server/controllers/video.server.controller.js and add the resizeVideo method this like so:

Here, we are calling the resizeVideo method and returning the response to a variable, then we are returning that URL back to the frontend.

Step 3: Capture the resizeVideoUrl in Transform Controller

Open up public/js/controllers/transform.client.controller.js and update this part of the updateVideo scope method like so:

$scope.videoDetails.resizedVideo = data.resizeVideoUrl , this is the code we added. It’s storing the returned resizeVideoUrl to a scope variable.

Step 4: Update the edit_video HTML Template

Open up views/pages/edit_video.client.view.html and add this just after the video background color preview div like so:

Now, we’ll add a width and height slider and make the textbox read-only like so:

Now, our edit page for each video should look like this:

screen shot 2016-07-06 at 3 03 07 pm

If you update a video, you will see the preview of the resized video!

Cloudinary supports the following video cropping modes: scale, fit, fill, limit, pad, lpad and crop.

Renaming Videos

Renamed videos are immediately and permanently updated in your cloud storage and existing URLs of videos and associated derived videos are modified, while videos and transformed videos already downloaded by visitors of your website might still be accessible for a certain period of time through cached copies on the CDN. Cloudinary’s client libraries wrap the API and simplify the renaming with the rename method. For example, renaming a video with the public ID of l5l2zq6aypxcpbhhzmlt to cute_dog will happen like so:

It’s that simple! You can experiment with that on your own.

Trimming Videos

A perfect use case for this is preventing a user from seeing a graphic part of a video or letting a user see only the most important part of a video. Cloudinary allows you to trim videos with a very seemingly easy technique.

Trim a video by using a combination of the following 3 parameters to specify the section of video to keep after trimming:

  • start_offset (so in URLs) specifies the start.
  • end_offset (eo in URLs) specifies the end.
  • duration (du in URLs) specifies the duration.

Possible values:

  • A float representing the time in seconds e.g. 5.44 (5 seconds and 440 milliseconds)
  • A string representing the percentage of the video length. This string consists of a number with a p appended e.g. 35p (0p is the first frame and 100p is the last frame). The client libraries also support appending a % instead of a p.

Trimming a video is actually very exciting. It’s one of my favorite features. Let’s experiment with it in our app.

Step 1: Add trimVideo method

Open up server/controllers/upload.server.controller.js and add this like so:

Step 2: Update updateVideoDetails method

Open up server/controllers/video.server.controller.js and add the trimVideo method this like so:

Here, we are calling the trimVideo method and returning the response to a variable, then we are returning that URL back to the frontend.

Step 3: Capture the trimVideoUrl and Update VideoDetails Object in Transform Controller

Open up public/js/controllers/transform.client.controller.js and update this part of the updateVideo scope method like so:

We added

$scope.videoDetails.trimmedVideo = data.trimVideoUrl  and also startOffset,duration to videoDetails object.  It’s storing the returned trimVideoUrl to a scope variable.

Step 4: Update the edit_video HTML Template

Open up views/pages/edit_video.client.view.html and add this just after the resized video preview div like so:

Now, we’ll add a start offset  and duration slider together with read-only textboxes like so:

 

screen shot 2016-07-06 at 3 44 36 pm

Now, try it out, update a video and watch the preview of the trimmed video. You’ll discover the trimmed video didn’t start from the beginning & it also goes as long as the duration you specified. :smile:

Deleting Videos

Deleted videos are immediately and permanently deleted from your cloud storage. However, videos and transformed videos already downloaded by visitors to your website might still be accessible for a few more days through cached copies on the CDN (using cache invalidation will cut this time down to up to one hour). Cloudinary’s client libraries wrap the API and simplify the deleting with the destroy method. For example, deleting a video with the public ID of “dog” will be implemented like so:

Implementation in Yourtube App

Step 1: Install angular-bootstrap-confirm

We’ll use the angular-bootstrap-confirm directive to bring up a Yes/No confirm modal to ensure the user actually wants to delete a video. Run this command in your terminal like so:

Now, reference it in your index.html like so

Open up public/js/app.js and add the module dependency  ‘mwl.confirm’

Step 2: Add Delete button

Open up public/views/pages/my_videos.client.view.html and add the button just after the edit link like so:

The button directive is from the angular-bootstrap-confirm directive.

Scroll up to the top-most div in this file and the ng-init directive with value like so:

Step 3: Add deleteVideo function to VideoController

Open up public/js/controllers/video.client.controller.js  and the method like so:

Make sure you don’t forget to inject the $window AngularJS directive. Now, let’s create a deleteVideo method in our Video Service.

Step 4: Add deleteVideo method to VideoService

Open up public/js/services/video.client.service.js and add the method like so:

Step 5: Add the delete method to Server route

Open up server/routes.js and add this:

Step 6: Add deleteVideo method to Server Controller

Open up server/controllers/video.server.controller.js and add this method like so:

You’ll discover that we have a deleteVideo method from the Upload Server Controller. Let’s build that in the next step.

Step 7: Add deleteVideo method to Server Upload Controller

Open up server/controllers/upload.server.controller.js and add this method like so:

Here, we are receiving the public_id of the video from the front-end to be able to identify it on Cloudinary’s server and delete it permanently.

Now try to delete a video :smile:

screen shot 2016-07-06 at 4 06 31 pm

Concatenating Videos

There are several reasons you might want to concatenate videos. One very obvious reason that comes to mind is adding an advert or promotional video for every video that is added on “Yourtube” or whatever video platform you are building.

Cloudinary supports the concatenation of videos by using the overlay video parameter (l_video: in URLs) to specify the name of another uploaded video and then the splice flag (fl_splice in URLs) to indicate that the video should be concatenated on to the container video and not added as an overlay.

Note that the videos spliced together must be the same width and height. You can use size transformation parameters to ensure that both videos match in size (w and h).

For example, to concatenate the video named cartoon on to the end of the video named dog_chilling, with both videos set to a width of 300 pixels and a height of 200 pixels:

To concatenate only a section of a video on to another video use the offset parameters like we did when we trimmed the videos earlier together with the layer_apply flag (fl_layer_apply in URLs). For example, to splice the first 5 seconds of the video named dog to the end of the same video named dog rotated by 180 degrees, with both videos set to a width of 300 pixels and a height of 200 pixels, you can use the REST API like so:

or the Node.js Cloudinary API method:

You can also Concatenate Video with Image 

For example, to concatenate the image named sample to the start of the video named dog for a duration of 3 seconds (both the video and image are scaled to a width of 300 pixels and a height of 200 pixels): You can do it like so:

 

Rotating Videos

You also have the ability to rotate videos. A video might be shot or recorded at an angle where a user will have to rotate the camera or viewing device to a certain angle to be able to watch the video properly. Well, Cloudinary can save you the headache of having you/users to turn around their precious device every time.

Rotate a video by any arbitrary angle in degrees with the angle parameter (a in URLs). If the angle is not a multiple of 90 then a rectangular bounding box is added containing the rotated video and empty space.

For example, let’s rotate a video by 90 degrees. With NodeJS, it’s as simple as:

If we rotate by 20%, we will have something like this:

 

Rounding Corners and creating circular videos

Transforming a video to a rounded version is done using the radius parameter (r in URLs) set to the number of pixels the radius of all four corners should be. For example, the uploaded mp4 video named dog resized to a width of 300 pixels and with rounded corners set to a radius of 20 pixels: Via the URL method, you’ll have something like so w_300 and r_30. Really very explanatory :smile:

In Nodejs, you can use this method from the Cloudinary library like so:

You can also crop the shape of the video to an ellipse like so:

You can also change the background color of the video from the default white color to any color you prefer like so:

OR the NodeJS library like so:

These methods are really simple to use!!!

The radius parameter can also be used to round the corners of overlays, which are then also given a transparent background. For example, the uploaded mp4 video named dog overlaid on the same video named dog with width set to 100 pixels, maximum radius cropping and north east gravity will work so:

or via Nodejs Cloudinary library like so:

Check out this video below for a brief overview!

Conclusion

In this post, we have looked at video resizing & cropping, renaming, trimming, deleting, concatenating, rotating, and creating rounding corners/circular videos.

In the next post, we’ll look at Transcoding videos, Quality control, Bit rate control, Video codec settings, Generating Video thumbnails, Adding image overlays, Adding Video Overlays, Adding text captions, and Adding subtitles.

The source code for this project is on GitHub.

If you have any questions or observations, please drop your thoughts in the comment section below :smile:

PROSPER OTEMUYIWA

About PROSPER OTEMUYIWA

Food Ninja, Code Slinger, Technical Trainer, Accidental Writer, Open Source Advocate and Developer Evangelist.