Function MediaRenderer

This component can be used to render any media type, including image, audio, video, and html files. Its convenient for rendering NFT media files, as these can be a variety of different types. The component falls back to a external link if the media type is not supported. The default size is 300px by 300px, but this can be changed using the width and height props.

Props: MediaRendererProps

Example

We can take a video file hosted on IPFS and render it using this component as follows

const Component = () => {
  return <MediaRenderer
    src="ipfs://Qmb9ZV5yznE4C4YvyJe8DVFv1LSVkebdekY6HjLVaKmHZi"
    alt="A mp4 video"
  />
}
Copy

You can try switching out the src prop to different types of URLs and media types to explore the possibilities.