DEV Community

Cover image for Video Web Component using Web Monetization API
Jasmin Virdi
Jasmin Virdi

Posted on • Updated on

Video Web Component using Web Monetization API

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>
Enter fullscreen mode Exit fullscreen mode

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

npm install web-monetized-video --save
Enter fullscreen mode Exit fullscreen mode

Once added you can import this in your App.

import 'web-monetized-video';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Submission Category:

Foundational Technology

Link to Code

GitHub logo 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 πŸ˜„.

Discussion (2)

Collapse
cyberdees profile image
☞ Desigan Chinniah ☜

That's great. Do also check out @philnash's attempts for further Web Component inspiration.

Collapse
jasmin profile image
Jasmin Virdi Author

Thanks, ohh that’s cool will check!πŸ˜‡