web3player-react now available: https://github.com/mubarakone/web3player-react

---

CREATED AT: https://showcase.ethglobal.com/roadtoweb3/web3player

web3player-vanilla

An open-source Web3 enabled video player for you to embed in your website.

Demo

View demo at https://mubarakone.github.io/Web3Player/. Change the branch from main to site if you want to view the index.html html file being used.

Prerequisites

1. Have an Ethereum address ready to use for transactions.
2. Have a video file (.mp4,.wmv, etc...) stored in the cloud with a URL linked directly to it.
3. Have a price to charge users per stream (meaning from start to end of video), price is only in ETH.

Installation

Download the web3player.js file into your workspace folder.

Open your HTML file and add these Javascript files to your script tags.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>

Including the file you downloaded in your workspace

<script src="web3player.js"></script>

Then you can embed the video player with these custom elements:

<web3-video></web3-video>

Once you have the video on your page, be sure to include the attribute insertLink="" and insert your video source link you uploaded to the cloud.

<web3-video 
insertLink="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4">
</web3-video>