How to create a component for image and video support and render it on page

[Venkat_SaiGa]

which can support both Image and Video, using file upload
field and render it on page.

[sarav_prakash · Accepted solution]

You dont need to create, just reuse existing wcm core components. 

Here are your OOTB options

1. Image component - allows to drag-n-drop DAM assets OR you can upload images from file upload and render https://www.aemcomponents.dev/content/core-components-examples/library/core-content/image.html
2. Foundation Video component - There is a legacy foundation video component https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/authoring/siteandpage.... However this is not recommended and AEM recommends to use Embed 
3. Embed Component - This is recommended approach to embed videos https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html
4. WKND - Refer to https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...

If you still want to develop custom component only instead of reusing ootb cookies, then refer to some tutorials that ll guide you creating new video/image component

https://www.youtube.com/watch?v=lUaNiO3dOrM

https://medium.com/activate-aem/aem-integration-with-dynamic-media-and-smart-crop-enablement-for-vid...

https://www.youtube.com/watch?v=fNVsxkicUzg

Hope this helps you. 

[Venkat_SaiGa]

Thankyou i have already created this .