{"id":28465,"date":"2021-08-06T18:54:28","date_gmt":"2021-08-06T18:54:28","guid":{"rendered":"http:\/\/Video-Skit-Maker-in-Next.js-Video-Transformations"},"modified":"2025-03-02T14:50:59","modified_gmt":"2025-03-02T22:50:59","slug":"video-skit-maker-in-next-js-video-transformations","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/video-skit-maker-in-next-js-video-transformations\/","title":{"rendered":"Video Skit Maker in Next.js – Video Transformations"},"content":{"rendered":"

In the first part of this post, we discussed how to upload a video with an audio clip to make a skit (short video clip). In this tutorial, we will learn how to add further transformations to the video. The transformations will add text, a progress bar, blur, and crop to the video as desired.<\/p>\n

You don\u2019t need to read the first part of this tutorial to follow through with this one.<\/p>\n

Sandbox<\/h2>\n

We completed the project on CodeSandbox<\/a>; you can fork it to get started quickly.<\/p>\n

    \n<\/code><\/span><\/pre>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
GitHub repository: https:\/\/github.com\/Olanetsoft\/audio-video-transformation\n\n## Prerequisites & Installation\n\nThe knowledge of JavaScript and React.js is required to follow through with this article. Also, you require [Node.js](https:\/\/nodejs.org\/en\/) and its package manager NPM installed to proceed.\n\nVerify you have Node installed using the following terminal command:\n\n```bash\n    node -v && npm -v \n<\/code><\/pre>\n
The above command should output their respective version number if installed.<\/p>\n
Scaffolding a Next.js Project<\/h2>\n
In the first part of this post, we built a Next.js app<\/a> that allowed us to upload videos and add an audio transformation using Cloudinary. In that part, we used the Cloudinary upload widget to upload media assets to Cloudinary. The component\u2019s state stores the returned asset\u2019s Cloudinary public ID.<\/p>\n
We will continue development on the first part\u2019s Next.js app.<\/strong> You can fork it to proceed.\nhttps:\/\/codesandbox.io\/s\/video-and-audio-upload-with-nextjs-zvuo9<\/a><\/p>\n
Alternatively, we can create a new Next.js project using the npx create-next-app<\/code> command.<\/p>\n
Once the app is initialized and the dependencies automatically installed, we will see a message with instructions for navigating to our site and running it locally. We do this with the command.<\/p>\n
    cd <project<\/span> name<\/span>><\/span> && npm start\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Installing Cloudinary<\/h2>\n
We will use the C<\/a>loudinary React package<\/a>, a React.js library that helps us optimally render Cloudinary videos and handles video transformations.<\/p>\n
We can use Cloudinary\u2019s robust transformation features<\/a> to modify the video distributed through an integrated content delivery network (CDN).<\/p>\n
We install the cloudinary-react package in the project\u2019s directory using npm with:<\/p>\n
    npm i cloudinary-react\n<\/code><\/span><\/pre>\n
Adding video transformation controls<\/h2>\n
We will display the controls for the video transformations on the home page by updating the functional component, pages\/index.js<\/code> created in part one, to include the following code snippet in this GitHub Gist.<\/p>\n
https:\/\/gist.github.com\/Chuloo\/420595bb7e083a6d9d9ec84f85e0aa85<\/a><\/p>\n
https:\/\/gist.github.com\/Chuloo\/420595bb7e083a6d9d9ec84f85e0aa85<\/a><\/p>\n
Here, we added form fields for:<\/p>\n
Next.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a>.<\/p>\n