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

---