Enhancing Video With AI-Powered Interactive Zooming

Cloudinary SDKs offer numerous cutting-edge and effective ways for managing and delivering media online. An example is the Cloudinary AI Content Analysis add-on with which you can locate text in photos and automatically crop images through a facial-detection capability. 

Now in beta testing is the AI-powered interactive video zoom-in feature, which enables online shoppers to zoom in to an object in a video—say, an attractive purse on a model’s shoulder or the hem design on a gorgeous dress—to show details that promise to help make purchase decisions. Thanks to that feature, e-commerce sites can better engage with shoppers and, oftentimes, gain sales revenue.

This article describes the benefits of the zoom-in feature and the procedures for setting up interaction areas for the Cloudinary Media Player and for handling zoom-in requests.

You can achieve more with less video footage by leveraging the interactive zoom-in feature, which offers three major benefits:

• Accord shoppers a close-up view of merchandise. With only a few clicks, shoppers can magnify areas of interest—such as the buttons on a shirt or the spokes on a bicycle—in product videos, especially wide-angle ones.
• Speed up video production. Zooming is accomplished through Cloudinary’s AI technology, which can also automatically scan videos to generate high-quality, zoomed-in versions for product pages and promotional channels, accelerating production and delivery.
• Highlight product features. AI locates the current location of the shopper-specified area of interest, such as a purse on a model’s shoulder, and centers that area on the canvas. 

To configure the Cloudinary Media Player for interactive zoom-in, sign up for a free Cloudinary account and then follow the steps below.

Enable interactive zoom-in by configuring these two fields for the object interactionAreas for the Cloudinary Media Player:

• property, which, if set to true, enables you to define the areas in which shoppers can interact with your media. 
• onClick, which is an event handler that processes zoom-in requests.

Take either of these two steps: 

• Pass a template by defining template with one or more of these four values to specify how Cloudinary displays the video’s interaction areas to shoppers: portrait, landscape, all, and center. For example, add the value landscape for a horizontal video.
• Pass a VTT file by specifying Cloudinary’s VTT URL.

Alternatively, set those fields manually by specifying the interaction area’s position. For details of the procedure, see the documentation on manualInteractionAreaProps.

Cloudinary calls onClick when shoppers interact with the designated areas. So, as the next step, set up for the interactionAreas field the onClick function, which receives a parameter with a zoom method that reacts to interactions:

onClick: function (event) {
 	event.zoom();
}Code language: JavaScript (javascript)

You can zoom in with zoom in either of these two ways: 

• Call the methods without parameters so that the Cloudinary Media Player automatically zooms in to the object of interest. 
• Specify a maximum of three updated resource URLs based on the product’s values (top, middle, and bottom) to trigger the playing of high-quality video segments that highlight the areas shoppers would like to focus on, as determined by the Cloudinary Media Player. For a demonstration, see the related documentation.

Also, feel free to configure the Cloudinary Media Player’s template and theme, the interaction dots, the ways in which to display them, and other parameters. 

By adopting Cloudinary’s AI-based interactive zoom-in feature for video through the straightforward procedure described above, you offer shoppers the much-desired ability to examine the nuances of your merchandise. Not only can you then save countless hours of manual work, you can also reuse existing media resources for creating content. It’s a significant win-win.

Have a try at setting up the beta version of the feature of interactive video. We welcome your feedback.