loading...
Cover image for Video Web Component using Web Monetization API

Video Web Component using Web Monetization API

jasmin profile image Jasmin Virdi Updated on ・2 min read

Web Monetization (3 Part Series)

1) Video Web Component using Web Monetization API 2) Web Monetization in Vue App using plugin 3) Monetize your Electron App πŸ’°

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

GitHub logo Jasmin2895 / web-monetized-video

experimenting with web monetisation API

web-monetized-video

A web component with has play and pay policy. This component charges you for the portion of video you have 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 -…

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

Web Monetization (3 Part Series)

1) Video Web Component using Web Monetization API 2) Web Monetization in Vue App using plugin 3) Monetize your Electron App πŸ’°

Posted on by:

Discussion

markdown guide
 

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

 

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