After hearing about the Web Monetization and Hackathon I started brainstorming about the ideas and thought of making something productive using Web Monetization that can help developers in using this technology.

I was initially confused with the type of project which I should pick then after many days of research and thinking I came to the conclusion of building a Web Component. I was really excited to implement this idea because of the following reasons.

I have never worked on a web component, so yes this is the best chance to experiment. 🙈
Experimenting with Web Monetization 💃
Open Source Contribution ⭐

About Web Component

The basic idea behind building this component was to enable users to pay for the content they are watching. Many times when we are browsing for some content and come across a site that has videos but in order to watch the desired content we have to purchase the full course. In such situations we can make use of Web Monetization and allow the users to pay for the content which they are interested in watching. This will also help the content holders to monetize their content at micro-levels.

<web-monetized-video> provides the functionality of paying for the content which the user is watching. This component is available on npm

I took reference from the Start/Stop Monetization section of the Web Monetization documentation.

To use the component you can load the module by including the script tag.

<script type="module" src="https://unpkg.com/web-monetized-video"></script>

This component can be added to your app via npm by using:

npm install web-monetized-video --save

Once added you can import this in your App.

import 'web-monetized-video';

To use the component in your code you can do the following:

<web-monetized-video width="300" height="200" url="video_url" monetization-link="payment_pointer"></web-monetized-video>

Submission Category:

Foundational Technology

Link to Code

Jasmin2895 / web-monetized-video

experimenting with web monetisation API

web-monetized-video

A web component which has play and pay policy and charges you for the amount of video watched. 😄 💃

Component:

[<web-monetized-video>] - a component that allow the user to pay for the section of video watched.

Installation

<web-monetized-video> is a packaged javascript module.

Modules are loaded asynchronulsy by browser, so for registering our component quickly we can load them in the head 👍

<head>
  <script type="module" src="https://unpkg.com/web-monetized-video"></script>
</head>

How to use

<html>
<head>
  <script type="module" src="https://unpkg.com/web-monetized-video"></script>
</head>
<body>

  <web-monetized-video width="300" height="200" url="video_url" monetization-link="payment_pointer"></web-monetized-video>

</body>
</html>

Parameters

width - Width of the…

View on GitHub

Demo Link

Additional Resources/Info

This is my first attempt in building web components 😅. I am currently exploring and gathering more knowledge about web components and trying to implement the knowledge gained in the project. I have taken help from these references for creating the component.

WebComponents.org
Web Monetization doc

In the end thanks to the team for providing us the chance to experiment and learn new Tech 😄.

Blog

Video Web Component using Web Monetization API

Jasmin Virdi