{"id":27817,"date":"2022-02-09T22:18:22","date_gmt":"2022-02-09T22:18:22","guid":{"rendered":"http:\/\/Video-Playback-for-Product-List-Page"},"modified":"2022-02-09T22:18:22","modified_gmt":"2022-02-09T22:18:22","slug":"video-playback-for-product-list-page","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/video-playback-for-product-list-page\/","title":{"rendered":"Create Video Playback for Product List Page"},"content":{"rendered":"

Videos are powerful tools driving the age-old industry of content marketing. Getting it right with videos and maximizing their marketing potential comes with the time-consuming effort of optimizing, managing, administering, and delivering them to your target audience. With managed media solutions like Cloudinary, we have less to worry about since almost everything is handled automatically.<\/p>\n

In this article, we will look at how to leverage Cloudinary\u2019s rich media transformation tools by building a simple web application that incorporates trimmed videos of products. Without further Ado, let\u2019s dive in.<\/p>\n

Here\u2019s a CodeSandbox link<\/a> to the project.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Run the this command in your terminal to bootstrap a simple react application:<\/p>\n

    npx create-react-app product-listing\n<\/code><\/span><\/pre>\n
Next, we need to install the Cloudinary SDKs as dependencies. Run this command in your terminal:<\/p>\n
    npm<\/span> install<\/span> @cloudinary<\/span>\/react @cloudinary\/url-gen@latest\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
The @cloudinary\/url-gen<\/code> module will generate URLs and apply transformations to media assets stored on the Cloudinary account, while the @cloudinary\/react<\/code> module provides components to render media assets to the screen.<\/p>\n
Cloudinary Setup<\/h2>\n
If you don\u2019t have a Cloudinary account already, create one here<\/a> for free. After that, log in to view your account credentials stored in the account details section on your Dashboard.<\/p>\n
Since we will be working on a client application, we will need just our API Key and cloud Name; these will be used to configure the Cloudinary SDKs we installed earlier.<\/p>\n
We also need to upload some video files to Cloudinary, which will be used in our demo application. See here<\/a> to learn how to upload assets to Cloudinary via the Media Library. You can get non-copyrighted videos from Pexels<\/a>.<\/p>\n
As seen below, each media item you upload will have a unique random string referred to as its public ID. It serves as a unique identifier for uploaded media assets.<\/p>\n
\"\"<\/p>\n
Getting Products Data<\/h2>\n
The application will need some data to render our products; usually, this data will live in a database somewhere on a server. To keep things simple, we would be storing our data in a file locally. Run the following command to create a file named data.json<\/code>.<\/p>\n
    cd<\/span> src<\/span>\n    touch<\/span> data<\/span>.json<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, populate the file with the following:<\/p>\n
    {\n        \"products\"<\/span>:[\n          {\n            \"id\"<\/span>:1<\/span>,\n            \"title\"<\/span>:\"macbook\"<\/span>,\n            \"price\"<\/span>:1200<\/span>,\n            \"videoId\"<\/span>:\"8ba64b04-f0e6-43af-a6a0-d7815646332b_jdh3ty\"<\/span>,\n            \"description\"<\/span>:\"A laptop manufactured by Apple.\"<\/span>\n          },\n          {\n            \"id\"<\/span>:2<\/span>,\n            \"title\"<\/span>:\"mustang\"<\/span>,\n            \"price\"<\/span>:27000<\/span>,\n            \"videoId\"<\/span>:\"477be0a5-3a37-4a81-b322-18bebe43fa1a_pypgpu\"<\/span>,\n            \"description\"<\/span>:\"A series of American automobiles manufactured by Ford\"<\/span>\n          },\n          {\n            \"id\"<\/span>:3<\/span>,\n            \"title\"<\/span>:\"durag\"<\/span>,\n            \"price\"<\/span>:2000<\/span>,\n            \"videoId\"<\/span>:\"3d983441-017b-49de-b8a0-6496699f1c9c_jickhv\"<\/span>,\n            \"description\"<\/span>:\"Silky, or wave cap is a close-fitting cloth cap tied around the top of the head.\"<\/span>\n          },\n          {\n            \"id\"<\/span>:4<\/span>,\n            \"title\"<\/span>:\"microphone\"<\/span>,\n            \"price\"<\/span>:50<\/span>,\n            \"videoId\"<\/span>:\"d64fceb6-bfe7-473b-8565-ab8360a4d824_d79xiq\"<\/span>,\n            \"description\"<\/span>:\"A microphone is a device that is used to make sounds louder or to record them\"<\/span>\n          }\n        ]\n    }\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
This file holds an array of objects containing random properties that describe each product. A noteworthy one is a videoId<\/code> property which has the public IDs<\/strong> of video assets we uploaded to Cloudinary. Replace the value of the videoId<\/code> property with the public IDs<\/strong> of videos uploaded to your Cloudinary account.<\/p>\n
Rendering the Product List<\/h2>\n
Create a folder called components<\/code> in your src<\/code> directory. Create a file called product.js<\/code> in the components<\/code> folder and add the following to it:<\/p>\n
    import<\/span> React from<\/span> 'react'<\/span>;\n    import<\/span> VideoPreviewer from<\/span> '.\/VideoPreviewer'<\/span>;\n    const<\/span> Product = ({ videoId, price, description, title }<\/span>) =><\/span> {\n      return<\/span> (\n        <div<\/span> className<\/span>='product br'<\/span>><\/span>\n          <section<\/span> className<\/span>='product_vid'<\/span>><\/span>\n    \n          <\/section<\/span>><\/span>\n          <section<\/span> className<\/span>='product_details'<\/span>><\/span>\n            <div<\/span> className<\/span>='grid_1_1'<\/span>><\/span>\n              <span<\/span> className<\/span>='badge b-gr'<\/span>><\/span>${price}<\/span<\/span>><\/span>\n              <span<\/span> className<\/span>='badge b-pur'<\/span>><\/span>for {price > 2000 ? 'adults' : 'kids'}<\/span<\/span>><\/span>\n            <\/div<\/span>><\/span>\n            <h4<\/span>><\/span>{title}<\/h4<\/span>><\/span>\n            <p<\/span>><\/span>{description}<\/p<\/span>><\/span>\n          <\/section<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> Product;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component is purely presentational; it simply renders a UI containing product information which the component receives as props.<\/p>\n
Next, let\u2019s update our App.js<\/code> file to use this component.<\/p>\n
    import<\/span> Product from<\/span> \".\/components\/Product\"<\/span>;\n    import<\/span> \".\/style.css\"<\/span>;\n    import<\/span> Data from<\/span> \".\/dummyData.json\"<\/span>;\n    const<\/span> App = ()<\/span> =><\/span> {\n      return<\/span> (\n        <main<\/span>><\/span>\n          <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n            {Data.products.map((product, index) => (\n              <Product<\/span> {...product<\/span>} key<\/span>={index}<\/span> \/><\/span>\n            ))}\n          <\/div<\/span>><\/span>\n        <\/main<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The code above imports the hardcoded data, the Product<\/code> component, and some styles. The component body renders the product component using the data.<\/p>\n
Run this command in your terminal to see the running application:<\/p>\n
    npm start\n<\/code><\/span><\/pre>\n
\"\"<\/p>\n
Display the Videos<\/h2>\n
We now have our products listed, and we need to display our videos. In the components<\/code> folder, create a file called videoPlayer.js<\/code> and add the following to it:<\/p>\n
    import<\/span> { Cloudinary } from<\/span> \"@cloudinary\/url-gen\"<\/span>;\n    import<\/span> { trim } from<\/span> \"@cloudinary\/url-gen\/actions\/videoEdit\"<\/span>;\n    \n    const<\/span> cld = new<\/span> Cloudinary({\n      cloud<\/span>: {\n        cloudName<\/span>: \"<INSERT-CLOUD-NAME-HERE>\"<\/span>,\n      },\n    });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, we imported the Cloudinary class and created an instance using our Cloudinary credentials. We imported the trim<\/code> action, which will help us generate the required transformation parameter that will be embedded in the asset\u2019s delivery URL.<\/p>\n
The videos uploaded on our Cloudinary account are of different sizes, but we want to display a trimmed version of these videos. Like every remotely stored media asset on the Internet, each video we uploaded to Cloudinary has some Unique URL pointing to it. Cloudinary refers to this URL as the delivery URL.<\/p>\n
We will use the Cloudinary instance to dynamically generate URLs for our video assets using their PublicID<\/strong> and appending the appropriate transformation<\/strong> parameters.<\/p>\n
Update your VideoPlayer.js<\/code> file with the following:<\/p>\n
    import<\/span> { Cloudinary } from<\/span> \"@cloudinary\/url-gen\"<\/span>;\n    import<\/span> { trim } from<\/span> \"@cloudinary\/url-gen\/actions\/videoEdit\"<\/span>;\n    \n    const<\/span> cld = new<\/span> Cloudinary({\n      \/\/...<\/span>\n    });\n    \n    const<\/span> VideoPlayer = ({ videoId }<\/span>) =><\/span> {\n      let<\/span> video = cld.video(videoId).videoEdit(trim().duration(5.0<\/span>));\n    };\n    export<\/span> default<\/span> VideoPlayer;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We defined and exported the component VideoPlayer<\/code>, which accepts publicID as props. It uses the Cloudinary instance, and a series of chained function calls to build the delivery URL to the video asset.<\/p>\n
It does the following:<\/p>\n