![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_135,c_scale\/f_auto,q_auto\/v1737448769\/Web_Assets\/blog\/Video-3\/Video-3.png?_i=AA\")
<\/figure>\n\n\n\nAs you read, think about which aspects of this video workflow might best suit your own PHP app as we explore how it integrates seamlessly into the PHP Product Catalog demo app.<\/p>\n\n\n
If you\u2019re just getting started with video workflows, be sure to check out the previous post<\/a> in this series, where we explored how Cloudinary handles image uploads, AI-driven transformations, and delivery.<\/p>\n<\/div>\n\n\n The PHP Product Catalog app showcases a simulated product catalog with products stored in a database. Each product includes a name, metadata (SKU, price, and category), an auto-generated description, an image, and a video. For details on the video upload-to-delivery workflow, check out the previous blog in this series.<\/p>\n\n\n\n With this app, you can:<\/p>\n\n\n\n See the app’s image features in action:<\/p>\n\n\n To follow along with this blog, make sure you:<\/p>\n\n\n\n The first step in managing video workflows is uploading files to Cloudinary. The Upload widget <\/a> provides an intuitive interface for direct uploads, removing the need for backend dependencies.<\/p>\n\n\n\n Here\u2019s how the Upload widget is configured in the demo app:<\/p>\n\n\n You need to specify your AI moderation ensures content safety, especially for user-generated videos. With Cloudinary add-ons like Amazon Rekognition Video Moderation<\/a>, you can have videos automatically reviewed asynchronously.<\/p>\n\n\n\n In our demo app, when you add or edit a product, the app sends the uploaded video for automatic moderation using the explicit<\/a> method of the Upload API. The review process occurs in the background, allowing users to continue using the app without interruptions. A placeholder message informs users that the video is under review. The app marks the video\u2019s moderation status as \u201cpending\u201d and updates the database with the results once moderation is complete.<\/p>\n\n\n\n Here’s the code: <\/p>\n\n\nE-commerce Demo Overview<\/strong><\/h2>\n\n\n\n
\n
Get Started<\/strong><\/h2>\n\n\n\n
\n
Client-Side Video Uploads<\/strong><\/h2>\n\n\n\n
\/\/ Configure the upload widget for videos<\/span>\n const<\/span> videoWidget = cloudinary.createUploadWidget({\n cloudName<\/span>: '<?php echo $_ENV['<\/span>CLOUDINARY_CLOUD_NAME']; ?>'<\/span>, \/\/ Replace with your Cloudinary cloud name<\/span>\n uploadPreset<\/span>: 'php_demo_preset'<\/span>, \/\/ Replace with your upload preset<\/span>\n sources<\/span>: ['local'<\/span>, 'url'<\/span>], \/\/ Allow uploads from local files and URLs<\/span>\n resourceType<\/span>: 'video'<\/span>, \/\/ Specify resource type as video<\/span>\n maxFileSize<\/span>: 50000000<\/span>, \/\/ Set a max file size (optional)<\/span>\n folder<\/span>: 'products\/videos'<\/span>, \/\/ Optional folder path<\/span>\n }, (error, result) => {\n if<\/span> (!error && result && result.event === \"success\"<\/span>) {\n console<\/span>.log('Video uploaded successfully:'<\/span>, result.info.secure_url);\n document<\/span>.getElementById('video_url'<\/span>).value = result.info.secure_url;\n document<\/span>.getElementById('video_id'<\/span>).value = result.info.public_id;\n \/\/ Display the new video alongside the current one<\/span>\n const<\/span> videoSection = document<\/span>.getElementById(\"video_section\"<\/span>);\n videoSection.innerHTML = `\n <label>Video:<\/label>\n <div>\n <video controls style=\"max-width: 200px; height: auto; margin-bottom: 15px;\">\n <source src=\"${result.info.secure_url}<\/span>\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n <\/div>\n `<\/span>;\n }\n });\n\n \/\/ Open the video upload widget<\/span>\n document<\/span>.getElementById('upload_video_button'<\/span>).addEventListener('click'<\/span>, () => {\n videoWidget.open();\n });\n<\/script><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\ncloudName<\/code> and an unsigned uploadPreset<\/code> to instantiate an Upload Widget.<\/p>\n\n
cloudName<\/code> on your Cloudinary dashboard.<\/li>\nphp_demo_preset<\/code> when clicking the first time setup button on the main page of the app. For more information about this upload preset and how to create it, see AI Image Workflows with PHP and Cloudinary<\/a>\n<\/li>\n<\/ul>\n<\/div>\n\n\nApply AI Moderation<\/strong> Asynchronously<\/h2>\n\n\n\n
Backend Implementation<\/h3>\n\n\n\n