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

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/default-components-foundation#video. 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-develop/overview

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-videos-b06dc7cd49cc

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

Hope this helps you.