js-player 🎥

A lightweight custom video player built as a reusable Web Component using pure JavaScript.
It works seamlessly across any modern web framework like React, Angular, Vue, or even plain HTML/JavaScript apps.

✨ Features

• ✅ Pure JavaScript (no dependencies)
• ✅ Framework-agnostic Web Component
• ✅ Easy to integrate in any frontend stack
• ✅ Customizable UI
• ✅ Lightweight and fast

🚀 Installation

npm install js-player

Or include directly in HTML via CDN (optional):

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/js-player@latest/js-player.js"></script>

🧩 Usage

In HTML:

<js-player src="video.mp4" poster="poster.jpg"></js-player>

<script type="module">
  import "js-player"; // Ensure this path is correct for your project setup
</script>

<!-- Or CDN -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/js-player@latest/js-player.js"></script>

In React:

import "js-player";

function App() {
  return (
    <div>
      <h2>Custom JS Video Player</h2>
      <js-player src="video.mp4" poster="poster.jpg"></js-player>
    </div>
  );
}

In Angular:

In angular.json, include:

"scripts": [],
"assets": ["node_modules/js-player"]

Then, use it in your component template:

<js-player src="video.mp4" poster="poster.jpg"></js-player>

⚙️ Attributes

| Attribute | Description | Required | Default | |------------|-----------------------------------------------------|----------|---------| | src | Source URL of the video or audio file | ✅ | — | | poster | Optional image shown before video loads | ❌ | — | | type | Media type: "video" or "audio" (string accepted)| ❌ | video | | color | Player UI accent color (CSS color value) | ❌ | white |