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…
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 😄.
Top comments (2)
That's great. Do also check out @philnash's attempts for further Web Component inspiration.
Thanks, ohh that’s cool will check!😇