JAVASCRIPT

How to build your own youtube – Part 7


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 video resizing & cropping, renaming, trimming, deleting, concatenating, rotating, and creating rounding corners/circular videos.

In this 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.

Transcoding Videos

Transcoding is the direct conversion of one video encoding format to another. Videos can be uploaded to Cloudinary in a variety of formats: mp4, webm, flv, mov, ogv, 3gp, 3g2, wmv,mpeg, flv, mkv or avi. These formats may not necessarily be best suited for web and mobile usage, so these videos can be dynamically converted and normalized to the relevant web formats, and optimized for different web browsers and mobile devices.

Transcoding the video to another format is done by simply specifying the new format as the file extension of the URL (client libraries can also use the format parameter to specify the new format). Cloudinary currently supports transcoding videos to one of the following output formats: MP4, OGV, FLV, WebM (see video_codec in the Video transformations reference table for the default settings for each format). Furthermore, video files can be converted to audio files by stipulating one of the following formats: MP3, OGG, WAV.

For example, transcoding the format of an uploaded mp4 video named dog to WebM format by changing the file extension to .webm like so:


where “dog” is the public_id of the video.

You can also change the file extension just via the URL like so:

It’s that simple!!! :smile:  Let’s implement the functionality in our application.

Step 1: Add Components to Edit Video Page

Open up views/pages/edit_video.client.view.html and add this like so to the form:

Topmost part of your page should be looking like this:

screen shot 2016-07-15 at 4 57 46 am

Here we have the current format of the video & an option to change the format to either ogv, flv or webm.

Step 2: Add changeFormat Method to the Backend

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

We are actively changing the format of the video to the option selected on the frontend.

Open up server/controllers/video.server.controller.js and add this to the updateVideoDetails method

Update the Video.update method to return the newformatVideoUrl as a json response.

Also open public/js/controllers/transform.client.controller.js and update the updateVideoDetails like so:

Notice we included:

So we can use the formattedVideo scope variable in our edit_video.client.view.html .

Now, go back to the edit_video.client.view.html and add this in the preview div section like so:

Now, once you click on the format you want and click on the Update Info button, it will change the format and you will see a preview of the video with the new format. Hooray!!! So simple :smile:

Quality Control

Control the video quality with the quality parameter (q in URLs). This parameter represents a mapping between the actual low-level settings of each different video format normalized to a quality value between 1 (lowest) and 100 (highest). Reducing the quality is a tradeoff between visual quality and file size. See video_codec in the Video transformations reference table for the default settings for each format.

For example, reducing the quality of an uploaded mp4 video named dog to 50 results in a file size of 1.1 MB compared to the original file size of 9.8MB:

where dog.mp4 refers to the public_id of the video

Note: There are libraries for other languages like PHP, Java, Ruby et.c . Check here for more details

Bit Rate Control

Use the bit_rate parameter (br in URLs) for advanced control of the video bit rate. This parameter controls the number of bits used to represent the video data. The higher the bit rate, the higher the visual quality of the video, but the larger the file size as well. Bit rate can take one of the following values:

  • An integer e.g. 120000.
  • A string supporting ‘k’ and ‘m’ (kilobits and megabits respectively) e.g. 500k or 2m.

For example, changing the bit rate of an uploaded mp4 video named dog to 500 kilobits (also reducing file size down to 1MB) can be done like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

Video Codec Settings

The video_codec parameter (vc in URLs) is used to determine the video codec, video profile and level to use in the form <codec>[:<profile>:[<level>]] e.g. vc_h264:baseline:3.1or vc_h264 or vc_h264:high. You can set this parameter to auto instead, to normalize and optimize the video for web (including audio settings).

By default, any transformation applied to the video (e.g., resizing) implicitly also uses the auto settings when delivering the transformed video, so using the auto setting is only needed when delivering the same format as originally uploaded with optimization but without any additional transformations. See video_codec in the Video transformations reference table for the default settings for each format.

For example, changing the video codec to h264, the profile to baseline and the level to 3:1 of an uploaded mp4 video named dog can be done like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

where dog.mp4 refers to the public_id of the video.

You can also normalize the video for web with the default auto settings like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

Generating Video Thumbnails

You can easily generate image thumbnails of your videos. The goodness about this functionality is that you can actually generate image thumbnails of any frame within an uploaded video by simplifying the image format you need e.g jpg, png, webp, wdp.

To control which frame is captured from the video as a thumbnail (the middle frame is selected by default), use the start_offset parameter (so in URLs) with one of the following values:

  • A float representing the time in seconds from the beginning of the video e.g. 5.44.
  • A string representing the percentage of the video from the beginning. 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.
  • A value of auto which automatically selects a frame that best matches the average value of a color distribution analysis of the first few seconds of the video, making it more likely to display a typical frame.

Let’s see how this works in Yourtube.

Step 1: Add generateThumbnail to Backend

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

Remember, we already have an offset percentage option on the edit video form from the previous trimmed video functionality we built in a previous post. We’ll just use that as shown in the code above.

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

Update the Video.update method to return the videoThumbnail as a json response.

Also open public/js/controllers/transform.client.controller.js and update the updateVideoDetails like so:

Notice we included:

So we can use the generatedThumbnail scope variable in our edit_video.client.view.html .

Now, go back to the edit_video.client.view.html and add this in the preview div section like so:

Now try it out, you should see the thumbnail generated based on the off_set percentage you chose!

screen shot 2016-07-15 at 7 15 00 am

Now, for the generated thumbnail, you can actually apply several transformations in the generation of a nice fine thumbnail like so:

Here, the image will be grayed, it will have a certain width and height, it will also hav a border. The URL equivalent of that is this:

Adding Image Overlays

Add an overlay image over a video with the overlay parameter (l in URLs) and the public ID of a previously uploaded PNG image (e.g. l_watermark for an image with the public ID of watermark). You can determine the dimension and position of the overlay using the width, height, x, y and gravity parameters the same way as used for images (see Adding watermarks, credits, badges and text overlays to images for more details). Furthermore, it is possible to control when the overlay is displayed by using any combination of the 3 offset parameters (see Trimming videos for more information on the parameters and their possible values). The overlay can also be further manipulated like any other image uploaded to Cloudinary

For example, adding an overlay of a PNG image called cloudinary_icon to the mp4 video named dog, that appears after 6.5 seconds and disappears at the 10 second mark. The overlay is also made into a watermark by reducing the opacity to 50 using the o parameter and increasing the brightness to 200% using the e_brightness effect can be done like so

Using the Cloudinary library method, for Node.js, you can apply it like so:

Check this video below :smile:

 

Adding Video Overlays

Add another video as an overlay over the container video by using the overlay video parameter (l_video: in URLs) and the public ID of a previously uploaded video (e.g. l_video:dog for a video with the public ID of dog). You can determine the dimension and position of the video overlay using the width, height, x, y and gravity parameters the same way as used for images (see Adding image overlays for more details). Furthermore, it is possible to control when the video overlay is displayed by using any combination of the 3 offset parameters (see Trimming videos for more information on the parameters and their possible values). The overlay can also be further manipulated like any other video uploaded to Cloudinary.

For example, adding an overlay of a video named dog to the same mp4 video named dog, that appears after 4.5 seconds and disappears at the 8 second mark. The overlay is also rotated by 90 degrees, set with a gravity of ‘east’ and scaled to a width of 200 pixels can be done like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

This is how your video will look like:

 

Adding Text Captions

Add a text caption over the video with the text: property of the overlay parameter ( l_text:in URLs), followed by the font name and size (separated with an underscore), a colon, and then the text string to display.

For example, adding the text string “Cool Video” in 60 pt Arial font at a distance of 80 pixels from the bottom of the mp4 video named dog, that appears after 2 seconds and disappears at the 5 second mark will be done via URL like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

Let’s see how this works in Yourtube!!!

Step 1: Add Components to Edit Video Page

Open up views/pages/edit_video.client.view.html and add this like so to the form:

Step 2: Update TransformController

Open up public/js/controllers/transform.client.controller.js and add this to the videoDetails Object in the  $scope.updateVideo function like so:

So, the updated videoDetails Object should be looking like so:

Step 3: Add captionVideo method to Backend

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

Remember, we already have an offset percentage option on the edit video form from the previous trimmed video functionality we built in a previous post. We’ll just use that as shown in the code above.

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

Update the Video.update method to return the captionedVideoUrl as a json response.

Also open public/js/controllers/transform.client.controller.js and update the updateVideoDetails like so:

Notice we included:

So we can use the captionedVideo scope variable in our edit_video.client.view.html .

Now, go back to the edit_video.client.view.html and add this in the preview div section like so:

Now try it out, you should see the text we put in the form show as an overlay on the video! :smile:

Adding Subtitles

You can add subtitles to videos from SRT files previously uploaded to Cloudinary as raw files with the subtitles: property of the overlay parameter ( l_subtitles: in URLs), followed by the SRT file name (including the .srt extension).

For example, to overlay the subtitles in the sample_sub_en.srt file to the mp4 video named dog, you can do it via the URL like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

You can also optionally include font and size settings (separated with an underscore) before the subtitles file name. For example, to overlay the subtitles in the sample_sub_en.srt file to the mp4 video named dog, using the Arial font with a size of 20 pixels, you can do it via the URL like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

You can also specify  a particular type of color and border to the text like so:

Using the Cloudinary library method, for Node.js, you can apply it like so:

Let’s talk about SRT files for a bit. Remember when you download movies from the internet and you need translations for the video, you go ahead to look for srt files in different languages. Aha!, it’s exactly the same type of SRT files we are focusing on here.

SRT(SubRip Text files) are text files named with the extension .srt, and contain lines of plain text in groups of subtitles separated by a blank line. The subtitles are numbered sequentially, starting at 1 and the timecode format used is hours:minutes:seconds,milliseconds with time units fixed to two zero-padded digits and fractions fixed to three zero-padded digits (00:00:00,000) with the comma used as a fractional separator. The file is structured as follows:

  1. A numeric counter identifying each sequential subtitle.
  2. The time that the subtitle should appear on the screen, followed by --> and the time it should disappear.
  3. Subtitle text itself on one or more lines.
  4. A blank line containing no text, indicating the end of this subtitle.

This is an example of an SRT file:

A very good scenario for this is building a video service where users can upload a Japanese video and also upload SRT files that can make that Japanese video have translations for English viewers to understand. Cloudinary makes this possible without breaking a sweat!

Conclusion

In this post, we have looked 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.

In the next post, we’ll look at Audio Frequency Control and tweaking alll sorts of Video Effects like noise, contrast, brightness, saturation, gamma and vignette.

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: