Using Dynamic Media Smart Crop for video

Last update: 2024-01-25
  • Created for:
  • Beginner
    User

Dynamic Media Smart Crop for video uses Adobe Sensei to intelligently track the point-of-interest in the video, ensuring videos look their best on all screen sizes.

 Transcript

Hi, there. In this video, let me walk you through dynamic media smart crop for video. Marketers often use digital content to deliver an engaging experience to end users, thus maximizing return of investment. Consumers like it because it’s easy to digest, entertaining and engaging. Video is a great way to add interest and interactivity to experiences, but its use has traditionally been limited to its original capture ratio. With smart crop for video, you can create several intelligent crops that can be used to fit any layout or screen size. Dynamic media smart crop for video leverages artificial intelligence powered by Adobe Sensei to track the point of interest, making sure our videos look like their best on all screen sizes. In this video, let me show you how to create various crop ratios for your video, explore different options to use the video in your marketing channels, and finally, how to add a smart crop video to your AEM site. From your AEM homepage, let’s navigate to tools and then select cloud services to configure a dynamic media configuration. If you already have a dynamic media setup in your AEM instance, you need not perform any additional steps to enable smart crop for video. If not, select the appropriate folder and create a new cloud service configuration. Enter your dynamic media credentials, and then save your changes. Please give it a few minutes for dynamic media to sync all necessary files to your instance. You will be notified with an inbox message when your setup is complete and ready to use. Dynamic media smart crop for video is available out-of-the-box in dynamic media and does not require any additional configuration. To create custom crop ratios for your videos, we need to create a video profile. Click on tools, select video profiles and open it. Let’s select a default adaptive video encoding profile and make a copy of it.

Open the new video profile to edit it. Please make sure to toggle the smart crop option and now let’s add new crop ratios to our video profile. Click on the add new button and provide a name and choose the desired crop ratio. Similarly, let’s add a few crop ratio for different device layouts and then save your profile.

Let’s also select the video profile that we created and apply it to your asset folder, where you plan to store your video files that need to be cropped. Now let’s navigate to the AEM assets folder to which we have applied our product profile. In card view, the video profile assigned to a folder is displayed. You can also view or modify profiles sent to a folder under folder properties under the dynamic media processing tab. Let’s open the sample folder and upload a new video. Video processing should take a few seconds based on its file size. While processing the asset, dynamic media video profiles and its settings gets applied during an asset upload. Once the asset gets processed, let’s open the file to view it. Using the content overlay, select the asset viewers list. To show you the difference between a smart crop video and a normal video, let me open the regular video viewer. Let me play the video and you can notice that the subject of the video is a sailing cruise ship. So whichever device you are on, you want to see the cruise at the focal point. While playing the video, let’s quickly resize the screen and you can notice that we do not have the cruise ship as our focal point at all points of the video playback.

Now let’s select the smart crop viewer and repeat the same step. When resizing the browser window, you can notice the cruise ship being on focus throughout the video playback. Dynamic media smart crop for video leverages artificial intelligence powered by Adobe Sensei to track the point of interest, making sure videos look their best on all screen sizes. Let’s make sure to publish the video file before using it on our marketing channels. Now let’s take a look at how to use our published asset file. On the bottom left corner of the screen, you can notice options to either share via URL or use the embed option. Select the URL option, and let’s open the URL in a new tab. URL button for an asset is only available for a published asset.

A published asset can also be embedded onto a page using the embed option. For non-AEM site users, to add a video file to their website, the share URL and embed options come in handy. For AEM-hosted sites, dynamic media smart crop video can be added using a new dynamic media WCM component called Smart Crop Video. Let’s open up a sample page from AEM sites and edit it. Under the page properties, select edit templates option, open the template policies for the page layout container, and then make sure that the smart crop video component and the dynamic media competent group is added.

Using the component finder filter, search for the smart crop video component, and then drag/drop to add it to your page. Let’s configure the component to make sure that the smart crop video viewer is selected.

Using the asset search finder, let’s search for our video file and then add the file to the smart crop video component.

After adding the component, let’s preview the site page to understand how it would look for an external user. When we resize the browser window, you can notice that the smart crop video seamlessly picks up one of the predefined smart crop ratios based on its width and height. You can also test the smart crop video using a device emulator to preview how it looks on mobile devices and other screen resolutions. Dynamic media smart crop for video leverages artificial intelligence powered by Adobe Sensei to track the point of interest, making sure videos look the best on all screen sizes. -

NOTE

The above video assumes that your AEM service is running on Dynamic Media S7 mode. Instructions on setting up AEM with Dynamic Media can be found here.

On this page