MediaRenderer variable

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.

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"
    />
  );
};

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

Signature:

MediaRenderer: React.ForwardRefExoticComponent<
  MediaRendererProps & {
    children?: React.ReactNode;
  } & React.RefAttributes<HTMLMediaElement>
>;