How to show audio, video or HTML media in your app
Most NFTs with audio, video or HTML media have several media files associated with them. In order to specify the precise media file you would like to render, you will need to follow a few steps:
- Determine the
keyof the media file you would like to render. Common keys includeimageandanimation_url.- In order to determine the
key, you can either:- Query the List NFT Media endpoint to retrieve a list of all media files available for a particular NFT.
- Query the Show NFT Metadata endpoint (or the batched version). An
allMediaPathsarray is returned which provides the list of all available media files.
- Center categorizes the available media into four categories:
image,audio,videoandother. We also provide the mime type for each, so that you can decide what you want to render.
- In order to determine the
- If rendering an
image,audioorvideofile use the Center Render NFT endpoint with the following:- Specify
originalfor thefilenameparameter. - Provide the
keyin themediaPathparameter. This is oftenanimation_urlfor audio and video NFTs.
- Specify
- If rendering
other(e.g., HTML files):- You should not use the Center Render NFT endpoint. Due to issues like relative paths and CORS, it is often not possible for us to render these directly.
- You should take the source URL from the media array and render it directly in your application using an iFrame or similar.
Want to predict the file type and size ahead of time?
We provide the mime type of each media file associated with an NFT in our media array (available both in the List Media response and the NFT Metadata response).
To determine the file size, you can:
- Make a header request to the Render NFT endpoint. This will provide the
content-lengthandcontent-typefor the media. - Query the Show NFT Metadata endpoint. A
mediaarray will be returned, which provides information about thesmallandmediumpresets. If this media has already been rendered by Center, we will provide the file size.
Updated about 2 years ago