How to mint an interactive NFT video player.

ⓘ This article was originally published on Monday, November 28th, 2022 @ 11:45a EST

Over the past few weeks we’ve minted some NFT video players via Loopring for Professor Clark & The Real DMT and there were quite a few people who’d expressed their interested in learning how to do this, so we’ve decided to put this tutorial together in hopes of helping others mint their own video content.

Here’s a quick list of all the tools I’ll be using throughout this tutorial;

An IDE: personally we’re using BBEdit but you’re welcome to use whatever IDE you like.
Photoshop: this is only used to create the square thumbnail image displayed in NFT wallets.
Pinata: this is used to interact with the inter planetary file system (IPFS).
Loopring: legacy-nft account used to mint the NFT on L2.
GameStop Wallet: this is one place where interactive NFTs are supported and can be played.

Getting Started

The first thing you’ll need to do is download the source code for the video player which can be found here, on GitHub.

For anyone that’s not familiar with GitHub, the screenshot above shows how you can download a copy of the source code locally which is the first step.

After you’ve downloaded the source’s .zip file locally you’ll need to extract (unzip) the content.

Once unzipped you’ll see the following files;

index.html: this is where you’ll define the video to be played, it’s also the entry point into your NFT.
styles.css: this is used to force the centered video layout along with other styling information (you do not need to change anything here).
src (directory): you will need to load YourVideo.mp4 into this directory as well.

Step 1: Loading your video content.

The first step is to add your video content into the /src directory.

Note: Your video must be loaded in .mp4 format.

The image below shows what the initial /src directory will look like after you’ve downloaded my GitHub repository.

The image below shows what your /src directory will look like after you’ve added YourVideo.mp4 file.

Note: You may name your video whatever you want. Do not include any spaces in your file name. Dashes and underscores are allowed, for example these names will work fine; Your-Video.mp4 or Your_Video.mp4

Step 2: Updating the index.html file to match YourVideo file name.

Once you’ve got your video file added the next step is to open the index.html file to play your video.

The video file line is found on line 13 of this file (see below), you’re looking to replace the portion that says “YourVideo.mp4”

You’ll also want to update the title found on line 5, you’re looking to replace the portion that says INSERT TITLE OF YOUR VIDEO HERE

				
					<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>INSERT TITLE OF YOUR VIDEO HERE</title>
	<link href="styles.css" rel="stylesheet">
</head>

<body style="border:0px solid; background:#000; margin:0px;">

<div class="clickToPlay">
         <video controls class="clickToPlay" width="100%" height="auto" playsinline>
  			<source src="YourVideo.mp4" type="video/mp4" />
		</video>
</div>
</body>
</html>

Step 3: Testing your player locally before minting.

To test that everything is working as-expected prior to minting your NFT simply open your index.html file within your preferred browser.

Note: You can drag-and-drop the index.html file into your browser to open it as well, that’ll look something like this;

Step 4: Minting your interactive NFT.

The first thing you’ll need to do is create a cover photo / thumbnail that will be visible within the GameStop wallet.

Once you’ve got that created you’ll need to upload it to Pinata (or however you interact with IPFS).

You’ll also need to put all of the files you originally downloaded into an /src directory before uploading that /src directory to IPFS as well.

Once you’ve got your thumbnail image + video player (/src directory) uploaded separately to IPFS you’re ready to create the metadata.json file for your interactive NFT.

Here’s what the metadata.json file looks like for the “Ape Way” music video;

				
					{
  "description": "Ape Way by The Real DMT", 
  "image": "ipfs://INSERT_CID_HERE", 
  "animation_url": "ipfs://INSERT_CID_HERE",
  "name": "Ape Way",
  "artist": "The Real DMT",
  "royalty_percentage": 0,
  "attributes": [
  	{
  		"trait_type": "Artist",
  		"value": "The Real DMT"
  	},
  	{
  		"trait_type": "Album",
  		"value": "Gamestop Saga Soundtrack"
  	},
  	{
  		"trait_type": "Media Type",
  		"value": "Music Video"
  	},
  	{
  		"trait_type": "Tracks",
  		"value": "1"
  	},
  	{
  		"trait_type": "Genre",
  		"value": "Hip Hop"
  	},
  	{
  		"trait_type": "Creator Royalty",
  		"value": "0%"
  	},
  	{
  		"trait_type": "Supported Devices",
  		"value": "Desktop & Mobile"
  	}
  ]
}

Notes: The CID of our image is used for “image” and the CID of my /src directory is used for “animation_url”. You can also change the “royalty_percentage” to any integer 0-10, the max royalty payout is currently 10%. Also, the “attributes” section is completely optional. If you’d prefer not to list any attributes for your NFT you can remove lines 8 through 37. If you do this, you will also need to remove the final comma in line 7 as well (after the 0 in royalty percentage).

Once you’ve created your metadata.json file you’ll also need to upload that file to IPFS, from there you can mint your interactive NFT.

Step 5: Minting your NFT on Loopring L2.

We’re using Loopring’s legacy NFT “advance create” minting option to mint our interactive NFT which can be seen in the screenshot below;

Note: Once your interactive NFT has been minted you will not be able to play it within Loopring’s website. You’ll either need to preview via IPFS or the Loopring Explorer to interact with your interactive NFT.

The next step is to transfer the L2 NFT to your GameStop wallet, once you’ve done that you’ll be able to click on the thumbnail image within GameStop’s wallet which will launch the video player interface. From there, click the play button to start watching your video.

Additional Resources

If you have any questions about this process, please feel free to send us a DM over on Twitter.

Also, please do NOT abuse this player and mint videos that you didn’t produce or otherwise do not own the rights to.

Stealing other peoples videos isn’t cool.

Tips: If you’d like to help support our NFT development journey with a tip you can click the “copy wallet address” text below to copy our wallet to your clipboard. Tips are not required, you are welcome to use this code and tutorial without tipping.

Wallet Address: 0x0A866B8Bf3CD444B412130833273B2231b5B50d8

Copy Wallet Address