Integrate Dynamic Media Assets into the EDS Website

[HariPr6]

I'm looking for guidance on integrating Dynamic Media with the Edge Delivery Service website. The goal is to have the site pages retrieve their assets directly from Dynamic Media URLs especially for images and videos. Could anyone provide insights or steps on how to do the integration?

[EstebanBustamante]

Hi, 

Please check this: https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/document-authoring/how-to/... 

Hope this helps.

[HariPr6]

Thank you for your response @EstebanBustamante, much appreciated,
The video demonstrates how to connect to AEM and import assets from a custom palette in EDS. I’m specifically looking for a way to integrate Dynamic Media and process EDS assets directly, without relying on AEM.
Any insights on this would be greatly appreciated.

[RiteshY18]

@HariPr6  think of using dynamic media API capabilities and a custom solution to address your use case - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/dynamicme... 

[ThejMundon]

@HariPr6 You can try API invocation method 

https://adobe-aem-assets-delivery.redoc.ly/#operation/headAssetMetadata 

For video: https://adobe-aem-assets-delivery.redoc.ly/#operation/videoPlayerDelivery 

and invoke using,

Bucket : delivery-pxxxx-exxx

Security : Your bearer token

assetId: urn:aaid:aem:bxxx - From dynamic media asset 

Hope this helps.

[apogupta]

see if this helps

• EDS site : https://aem-dynamicmedia-demo--dm--hlxsites.aem.live/travel-hospitality/wknd-trvl-home
• Git repo : https://github.com/hlxsites/franklin-assets-selector/tree/aem-dynamicmedia-demo/blocks
• GDoc: https://drive.google.com/drive/folders/1HCCHRWp4HJIXW_cUv5cRDQ5DzzqiZsXT?usp=sharing

Scalable Web-Optimized Delivery & Content Transformation Using Dynamic Media

[Shaka]

Hello,

I understand that you're looking to integrate Dynamic Media with your Edge Delivery Service to serve assets (images and videos) directly via Dynamic Media URLs. Here’s a general guide to help you get started with the integration:

1. Ensure Dynamic Media and Edge Delivery Service Setup:

• Dynamic Media Setup: Ensure that your Dynamic Media instance is configured and your assets (images, videos, etc.) are uploaded and accessible through the Dynamic Media system.

• Edge Delivery Service: Verify that your Edge Delivery Service (possibly Adobe's Dynamic Media CDN or a similar CDN) is set up correctly to deliver assets. The Edge Delivery Service should be able to cache and serve assets from Dynamic Media’s URLs.

2. Integrate Dynamic Media URLs into Your Website:

• Asset URLs: Once your assets are uploaded to Dynamic Media, you’ll get unique URLs for each asset. These URLs will be used to retrieve assets on your website.

• Dynamic Media URL Format: Ensure that the URLs follow the correct format. Typically, Dynamic Media URLs look like this:

https://<your-domain>.imgix.net/path/to/asset.jpg

These URLs should be dynamic and able to retrieve images/videos based on specific query parameters for resizing, cropping, and optimization.

• Embed Dynamic Media URLs: For images: Replace the current image URLs on your website with the Dynamic Media URLs. You can directly link to the Dynamic Media assets in your HTML image tags:

<img src="https://<your-domain>.imgix.net/path/to/asset.jpg" alt="Image description">
​

For videos: You can embed videos similarly by referencing the video URL:

<video controls>
  <source src="https://<your-domain>.imgix.net/path/to/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
​

3. Optimize Assets via Dynamic Media URL Parameters:

Dynamic Media offers several URL parameters that allow you to optimize and transform images and videos dynamically, such as:

• Resize: Resize images on the fly.

https://<your-domain>.imgix.net/path/to/asset.jpg?w=500&h=500

• Format: Automatically convert images to the best format.

https://<your-domain>.imgix.net/path/to/asset.jpg?auto=format
​

• Crop: Crop images dynamically.

https://<your-domain>.imgix.net/path/to/asset.jpg?crop=faces
​

Use these parameters to optimize the delivery of assets based on the user’s device and network conditions.

4. Implement CDN and Edge Delivery:

• Cache the Assets: Ensure that your Edge Delivery Service is caching the assets retrieved from Dynamic Media URLs. This improves performance by delivering the content from the nearest edge server to the user.

• Ensure Caching Rules: Verify that the caching rules in your Edge Delivery Service are correctly configured to cache Dynamic Media content (images, videos) for optimal performance.

5. Monitor and Test the Integration:

• After implementing Dynamic Media URLs into your site, monitor the performance and behavior of the assets being served. Check for issues like caching delays, incorrect asset rendering, or slow load times.

• Use Developer Tools: Use browser developer tools to check the network requests and verify that assets are being retrieved from the Dynamic Media URLs and served via the CDN as expected.

6. Optional: Integration with Other Tools:

• If you are using a CMS like Adobe Experience Manager (AEM), check if there’s a built-in integration to simplify embedding Dynamic Media URLs.

• Alternatively, explore the Dynamic Media API for more advanced integrations, including automatic asset management and serving via APIs.

Summary of Steps:

1. Ensure Dynamic Media and Edge Delivery Service are configured.

2. Replace traditional asset URLs with Dynamic Media URLs in your site’s HTML.

3. Optimize assets using Dynamic Media URL parameters.

4. Configure Edge Delivery Service to cache and serve these assets.

5. Monitor and test the integration to ensure smooth asset delivery.

If you encounter any specific issues during the integration process, feel free to share more details, and I’d be happy to assist further!

Best regards,

Shaka